Angular 7在ngFor循環內隱藏特定屬性

Question

我正在使用一個角度為ngFor的循環7我需要在ngFor循環內隱藏一個特定的屬性（例如userNo和UserType）。

emailId: "afsageg@dgvsf"
groupName: "dfsfgfdg"
mobileNo: "+91fyrtyrtyty"
userId: "ttrur"
userName: "srurttuidharan"
userNo: 2
userType: "rrhjty"
userTypeDisplay: "Operator Maker"

<tr *ngFor="let key of formData | keyvalue" >
    <td [hidden]="key.userNo">{{key.key | titlecase}}</td>
    <td>{{key.value}}</td>
</tr>

Answer 1

<td [hidden]="key.key==='userNo'">{{key.key | titlecase}}</td>
<td [hidden]="key.key==='userNo'">{{key.value}}</td> <!--if you also want to hide the value -->

或者，您可以使用*ngIf代替[hidden]

我還建議將key重命名為object （或什至不太通用的名稱），因為*ngFor每次迭代*ngFor保存一個對象，而不僅僅是鍵（因此您可以訪問鍵AND值）

所以像這樣：

<tr *ngFor="let obj of formData | keyvalue" >
    <td [hidden]="obj.key==='userNo'">{{obj.key | titlecase}}</td>
    <td [hidden]="obj.key==='userNo'">{{obj.value}}</td>
</tr>

小Stackblitz來說明

Answer 2

emailId: "afsageg@dgvsf"
groupName: "dfsfgfdg"
mobileNo: "+91fyrtyrtyty"
userId: "ttrur"
userName: "srurttuidharan"
userNo: 2
userType: "rrhjty"
userTypeDisplay: "Operator Maker"

<tr *ngFor="let key of formData | keyvalue" >
    <td [hidden]="key.userNo === true">{{key.key | titlecase}}</td>
    <td>{{key.value}}</td>
</tr>

Answer 3

如果您想隱藏屬性，可以執行以下操作

<td [attrib]="key.userNo?'value':null">

如果您不想顯示文字，可以

<td>{{key.userNo?'':key.key | titlecase}}</td>

其他是使用style.display

<td [style.display]="key.userNo?'none':null">

的* ngIf

<td *ngIf="!key.userNo">