将 Angular 中的 * ngIf 属性组合成一个 Input答案

【问题标题】：Combine * ngIf property in Angular into an Input将 Angular 中的 * ngIf 属性组合成一个 Input
【发布时间】：2021-09-03 04:39:03
【问题描述】：

我有一个使用 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>

【问题讨论】：

大多数属性和属性都可以在 Angular 中进行有条件地设置。请参阅here 了解更多信息。因此，您可以尝试使用<input matInput placeholder="{{clients.name}}" [(ngModel)]="clients.name" [readonly]="editIndex!=i">，而不是两个单独的<input>s。在这种情况下，*ngIf 指令不是必需的。

标签： angular typescript angular-material angular-ng-if angular11

【解决方案1】：

……怎么样？

<input matInput ... [readonly]="editIndex!=i">

【讨论】：

【解决方案2】：

您也可以设置条件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>

【讨论】：

太好了，这对我有用。我的问题是关于外观，它是如何工作的？
你可以在我的 sn-p 中找到，这可能有效，但如果没有，请告诉我。
是的，代码有效。我说的是 [appearence] 属性现在是如何工作的？

【解决方案3】：

你可以这样做：

<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'" // Since you are not binding with any variable here, you can replace with appearance="none"
        >
           <input 
              matInput 
              placeholder="{{clients.name}}" // You can replace this with [placeholder]="clients.name"
              [(ngModel)]="clients.name" 
              [readonly]="editIndex !== i"
            />
        </mat-form-field>
   </mat-cell>
</ng-container>

【讨论】：