Question

我一直在尝试使用 Angular Material 在 Angular 7 中使可重用的 CRUD表组件，我可以在其中传递任何数组数据对象，然后表呈现数据。

在那个Table组件中，我还传递了与要附加链接的列名配对的链接数组，例如：

redirectionLinks = [{{link：'/ students'，column：'name} ...]

TableComponent：

模板：

<table mat-table [dataSource]="dataList | filterByName:searchValue" class="mat-elevation-z8">

  <ng-container *ngFor="let column of columnList; let i = index;" matColumnDef="{{column}}">

    <ng-container *ngIf="column!=='Delete' && column!=='Edit'">

      <th mat-header-cell *matHeaderCellDef> {{column}} </th>

      <ng-container *ngFor="let linkObj of redirectionLinks;let j = index;">

        <ng-container *ngIf="column === linkObj.column;">
          <td mat-cell *matCellDef="let item" [routerLink]="[linkObj.link, item.id]" class="td-hoverable"> {{item[objKeys[i]]}}</td>
        </ng-container>

        <ng-container *ngIf="column !== linkObj.column;">
          <td mat-cell *matCellDef="let item"> {{item[objKeys[i]]}} </td>
        </ng-container>



      </ng-container>

    </ng-container>




    <ng-container *ngIf="column=='Delete'">
      <th mat-header-cell *matHeaderCellDef> Delete </th>
      <td mat-cell *matCellDef="let item"> <button mat-button color="error" (click)="deleteItem(item)">Delete</button></td>
    </ng-container>

    <ng-container *ngIf="column=='Edit'">
      <th mat-header-cell *matHeaderCellDef> Edit </th>
      <td mat-cell *matCellDef="let item"> <button mat-button color="accent" (click)="editItem(item)">Edit</button> </td>
    </ng-container>




  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnList"></tr>
  <tr mat-row *matRowDef="let item; columns: columnList;"></tr>


</table>

TableComponent ：逻辑：

@Input() dataList;
@Input() searchValue: string;
@Input() columnList;
@Input() redirectionLinks;

@Output() emitDeleteEvent = new EventEmitter();
@Output() emitEditEvent = new EventEmitter();

objKeys = [];

console = console;

ngOnInit(): void {

    // since every object has same props we use the first one -> [0]
    this.objKeys = Object.keys(this.dataList[0]);

    // add edit and delete cols
    this.columnList.push('Delete');
    this.columnList.push('Edit');




}


deleteItem(item) {
    this.emitDeleteEvent.emit(item);
}

editItem(item) {
    this.emitEditEvent.emit(item);
}

ngOnDestroy() {
    console.log("im destroyed");
}

StudentsPageComponent（父级）

模板：

<h2 class="centered-header">Students</
    <app-search (searchEvent)="getSearchValue($event)"></app-search>
    <app-table-crud
       (emitDeleteEvent)="deleteStudent($event)"
       (emitEditEvent)="editStudent($event)"
       [dataList]="students"
       [columnList]="tableColumns"
       [searchValue]="searchValue"
       [redirectionLinks]="redirectionLinks"
    ></app-table-crud>

逻辑：

export class StudentsPageComponent {

students = [
    { id: '1', name: 'Stefanos Lalic', billAccount: '15123512', accountBalance: '$423.00' },
    { id: '2', name: 'Anastasia Lalic', billAccount: '51231252', accountBalance: '$1423.00' },
    { id: '3', name: 'Olivia Lalic', billAccount: '31515231', accountBalance: '$5122.00'}
];

tableColumns = ['ID', 'Name', 'Bill Acc', 'Balance'];

redirectionLinks = [
    {link: '/billAccount', column: 'Bill Acc'},
    {link: '/student', column: 'Name'}
];

searchValue: string;


getSearchValue(searchValue) {
    this.searchValue = searchValue;
}

deleteStudent(student) {
    console.log(student);
}

editStudent(student) {
    console.log(student);
}

}

This is how it looks rendered, keep in mind that only Bill Acc links are rendered, while /student link is being ignored

Answer 1

我通过在Table组件内部添加一个函数来修复它：

HttpClient

，而不是使用* ngFor来在模板内部进行迭代，我只是使用了

hasLink(column) {
  return this.redirectionLinks.some(element => 
      element.column === column
  )
}

* ng如果未进行评估

1 个答案: