Angular 7 在 ngFor 循环中隐藏特定属性
Angular 7 hide particular attribute inside ngFor loop
我正在使用 ngFor 循环 angular 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>
<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
的每次迭代都包含一个对象而不仅仅是键(因此为什么你可以访问键和值)
所以像这样:
<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>
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>
如果你想隐藏一个属性,你可以这样做
<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">
我正在使用 ngFor 循环 angular 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>
<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
的每次迭代都包含一个对象而不仅仅是键(因此为什么你可以访问键和值)
所以像这样:
<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>
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>
如果你想隐藏一个属性,你可以这样做
<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">