I'm using a ngFor loop angular 7 I need to a hidden particular attribute(example userNo and UserType ) inside a ngFor loop.
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 -->
Or you can use *ngIf
instead of [hidden]
I would also suggest to rename your key
to object
(or something less generic even) as each iteration of the *ngFor
holds an object and not just the key (hence why you can access key AND value)
So something like:
<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>
If you want hide an attribute you can do some like
<td [attrib]="key.userNo?'value':null">
If you want not show a text, you can do
<td>{{key.userNo?'':key.key | titlecase}}</td>
Others is use style.display
<td [style.display]="key.userNo?'none':null">
of *ngIf
<td *ngIf="!key.userNo">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.