* ngЕсли не оценивается

Question

Я пытался сделать повторно используемую Компонент таблицы CRUD в Угловой 7 , используя Угловой материал , где я могу передать любой массив объектов данных и таблица отображает данные.

В этом компоненте таблицы я также передаю массив ссылок в паре с именем столбца, к которому я хочу прикрепить ссылку, например:

redirectionLinks = [{link: '/ Students', столбец: '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>

Logic

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);
}

}

Вот так это выглядит, имейте в виду, что отображаются только ссылки Bill Acc, а ссылка / student игнорируется

Answer 1

Я исправил это, добавив функцию внутри моего компонента Table:

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

и вместо итерации внутри шаблона с помощью * ng, просто я использовал:

<ng-container *ngIf="hasLink(column); then with_link else without_link">

    </ng-container>