Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Angular Material Table: manuelle Spalten einfügen

01.02.2021 (👁9385)


Aufgabe:

Wie kann man spezielle Spalten mit statischem Text oder Links einfügen in eine Angular Material Tabelle?

Lösung:

Anstatt einer Material Cell gibt man ein reguläres HTML Element aus

Standard Angular Material Cell

<td mat-cell *matCellDef="let element"> {{element.dtEnd}} </td>

 

Als HTML Element

<a href="/timerecords/edit/{{element.idtimeRecord}}">Edit</a>

 

 

    <!-- Edit-Column -->

    <!-- *as column with a link to edit page -->

    <ng-container matColumnDef="edit" >

      <th mat-header-cell *matHeaderCellDef>edit</th>

      <td mat-cell *matCellDef="let element">

        <a href="/timerecords/edit/{{element.idtimeRecord}}">Edit</a>

      </td>

    </ng-container>

    <!--/  Edit-Column -->

 

 

Spalte Definition in Typescript

Die Spalte muss in der typescript Codebehind Datei als Material Spalte vorgegeben werden

In .component.ts

  //< variables >

  displayedColumnsstring[] = ['project''details''dtStart''dtEnd','edit','delete'];

  //dataSource: TimeRecord;

  dataSource = new MatTableDataSource<TimeRecord>();

 

 

Code Material Table Liste

List-timerecords.component.ts

<div class=" mat-elevation-z8">

  <div class="error_table_loading" *ngIf="isHttpError">Api Data error</div>

  <p>List</p>

  <table mat-table [dataSource]="dataSource" class="timerecordtable" matSort matSortActive="created" matSortDisableClear

    matSortDirection="desc">

    <ng-container matColumnDef="project">

      <th mat-header-cell *matHeaderCellDef> project </th>

      <td mat-cell *matCellDef="let element"> {{element.project}} </td>

    </ng-container>

    <!--  Edit-Column -->

    <ng-container matColumnDef="edit" >

      <th mat-header-cell *matHeaderCellDef>edit</th>

      <td mat-cell *matCellDef="let element">

        <a href="/timerecords/edit/{{element.idtimeRecord}}">Edit</a>

      </td>

    </ng-container>

    <!--/  Edit-Column -->

    <!--  Delete-Column -->

    <ng-container matColumnDef="delete">

      <th mat-header-cell *matHeaderCellDef>delete</th>

      <td mat-cell *matCellDef="let element">

        <a href="/timerecords/delete/{{element.idtimeRecord}}">Delete</a>

      </td>

    </ng-container>

    <!--/  Delete-Column -->

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

  </table>

</div>

<mat-progress-spinner></mat-progress-spinner>

 

 

 

Code list-timerecords.component.ts

 

import { ComponentViewChildOnInitAfterViewInit } from '@angular/core';

import { TimerecordsService } from "../../../services/timerecords.service";

import { TimeRecord } from '../../../models/timerecords.model';

import { pipe } from 'rxjs';

import { catchErrormapstartWithswitchMap } from 'rxjs/operators';

import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

import {ThemePalettefrom '@angular/material/core';

import {ProgressSpinnerModefrom '@angular/material/progress-spinner';

import { mergeObservableof as observableOf } from 'rxjs';

import { MatTableDataSource } from '@angular/material/table';

@Component({

  selector: 'app-list-timerecords',

  templateUrl: './list-timerecords.component.html',

  styleUrls: ['./list-timerecords.component.css']

})

export class ListTimeRecordsComponent implements OnInit {

  //========< class: Compontent >========

  constructor(public timerecordsServiceTimerecordsService) { }

  //< variables >

  displayedColumnsstring[] = ['project''details''dtStart''dtEnd','edit','delete'];

  //dataSource: TimeRecord;

  dataSource = new MatTableDataSource<TimeRecord>();

  resultsLength = 0;

  isLoadingResults = true;

  isHttpError = false;

  //</ variables >

  colorThemePalette = 'primary';

  modeProgressSpinnerMode = 'indeterminate';

  

  //==< events >==

  ngOnInit() {

    this.load_DataSource();

  }

  //==</ events >==

  //#region 

  //====< functions >====

  load_DataSource() {

    //--------< load_DataSource() >--------

    this.isLoadingResults = true;

    merge()

    .pipe(

      startWith({}),

      switchMap(() => {

        this.isLoadingResults = true;

        return this.timerecordsService.getData()

      }),

      catchError(() => {

        this.isLoadingResults = true;

        this.isHttpError = true;

        return observableOf([]);

      })

    ).subscribe(res =>

      {this.dataSource.data = res as TimeRecord[]} 

      )

    

    //--------</ load_DataSource() >--------

  }

  //====</ functions >====

  //#endregion

  //========</ class: Compontent >========

}