angular - 将 Angular 中的 * ngIf 属性组合成一个 Input

Question

我在 Angular 11 和 Angular 材料中有一个项目，我试图将*ngIf属性与 readOnly 属性结合起来，以避免放置两个输入。

这是我的component.html：

<ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let clients; let i = index">
          <mat-form-field *ngIf="editIndex!=i" floatLabel="never" [appearance]="'none'">
              <input matInput placeholder="{{clients.name}}" [(ngModel)]="clients.name" [readonly]="true">
          </mat-form-field>
          <mat-form-field *ngIf="editIndex==i" floatLabel="never" [appearance]="'legacy'">
              <input matInput placeholder="{{clients.name}}" [(ngModel)]="clients.name">
          </mat-form-field>
        </mat-cell>
      </ng-container>

现在我有两个mat-form-field，每个都有一个输入，一个[readonly]="true"取决于*ngIf = "editIndex! = I"属性。我怎样才能将两者结合起来，只将一个 mat-form-field 与一个 Input 结合起来？

这是我想尝试的，但我不知道该怎么做或是否可以做到：

<ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let clients; let i = index">
      <mat-form-field floatLabel="never" [appearance]="'none'">
          <input matInput placeholder="{{clients.name}}" [(ngModel)]="clients.name" *ngIf="editIndex!=i; [readonly]="true"">
      </mat-form-field>
    </mat-cell>
</ng-container>

标签： angulartypescriptangular-materialangular-ng-ifangular11

Answer 1

您可以设置条件readonly，appearance也可以。

 <mat-form-field floatLabel="never" [appearance]="editIndex != i ? 'none' : 'legacy'">
     <input matInput placeholder="{{clients.name}}" 
     [(ngModel)]="clients.name" [readonly]="editIndex!=i"">
 </mat-form-field>