根据条件禁用输入

kau*_*han 7 html typescript angular

大家好,我有以下代码:

<table class="details-table" *ngIf="peop && peopMetadata">
    <tr *ngFor="let attribute of peopMetadata.Attributes">
        <td class="details-property">{{attribute.AttributeLabel}}</td>
        <td [ngSwitch]="attribute.AttributeType">
            <div *ngSwitchCase="'String'">
                <input matInput [(ngModel)] = "peop[attribute.AttributeKey]" />
            </div>
            <div *ngSwitchDefault>{{peop[attribute.AttributeKey]}
            </div>
        </td>
    </tr>
    <div>
        <button ng-click="">Submit</button>
    </div>
</table>
Run Code Online (Sandbox Code Playgroud)

我想根据属性值禁用输入,比如 peop[attribute.IsWritable]='false' 。我怎么能在这里做到这一点。任何帮助表示赞赏

dan*_*y74 13

仅输入方法:

<input [disabled]="!peop[attribute.IsWritable]" matInput [(ngModel)] = "peop[attribute.AttributeKey]" />
Run Code Online (Sandbox Code Playgroud)

有条件的方法:

<ng-container *ngIf="peop[attribute.IsWritable]">
  <input matInput [(ngModel)]="peop[attribute.AttributeKey]" />
</ng-container>

<ng-container *ngIf="!peop[attribute.IsWritable]">
  <span>{{ peop[attribute.AttributeKey] }}</span>
</ng-container>
Run Code Online (Sandbox Code Playgroud)

或者:

<input *ngIf="peop[attribute.IsWritable]" matInput [(ngModel)]="peop[attribute.AttributeKey]" />
<span *ngIf="!peop[attribute.IsWritable]">{{ peop[attribute.AttributeKey] }}</span>
Run Code Online (Sandbox Code Playgroud)