时间戳

首页 > 解决方案 > 将 ngif 放入 Angular 材质中

angular-material - 将 ngif 放入 Angular 材质中

问题描述

我正在使用 Angular + Typescript 构建一个网络应用程序。我有 ASP.NET Core Web API，我有两个组件，一个是员工，另一个是部门，我想在“部门”中运行条件，例如，如果我选择部门 IT 我得到了这个部门的所有员工，问题是只获取选定部门中的员工而不是所有员工，我不能在同一语句 HTML 中使用 *ngif 和 *matcelldef

<mat-card>
<mat-card-header class="w-100">
    <mat-card-title-group class="w-100">
        <mat-form-field appearance="fill">
            <mat-label>{{'::Departement' | abpLocalization}}</mat-label>
            <mat-select id="author-id" Name="departementId" [(value)]="selected" autofocus>
                <mat-option [value]="departement.id" *ngFor="let departement of departements$ | async">{{ departement.name }}</mat-option>
            </mat-select>
        </mat-form-field>
    </mat-card-title-group>
</mat-card-header>
<mat-card-content>
    <table mat-table [dataSource]="employee.items" class="w-100" matSort (matSortChange)="changeSort($event)">
        <tr mat-header-row *matHeaderRowDef="columns"></tr>
        <tr mat-row *matRowDef="let myRowData; columns: columns"></tr>

        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                {{'::Name' | abpLocalization}}
            </th>
            <li *ngFor="let employee of employee.items ">
                {{employee.name}}
            </li>
  <td mat-cell *matCellDef="let element"><div *ngIf="element.departementId === selected ">{{element?.name}}</div></td> 
        </ng-container>
    </table>
    <mat-paginator [length]="employee.totalCount" [pageSize]="list.maxResultCount" (page)="changePage($event)"></mat-paginator>
</mat-card-content>

标签： angular-material

解决方案

<li *ngFor="let employee of employee.items ">您employee对不同的属性使用相同的名称我认为这是问题，只需将其更改为<li *ngFor="let item of employee.items ">.

还有一件事，如果你想添加*ngIf=""到使用另一个结构指令的元素，你可以用这个元素四舍五入<ng-container><ng-container>并将*ngIf=""指令添加到它。

<ng-container *ngIf="write_your_condition">
   <td mat-cell *matCellDef="let element">
      <div *ngIf="element.departementId === selected ">{{element?.name}}</div>
   </td>
</ng-container>

推荐阅读