I have a table that displays the properties from an object. I would want to know if there is an easy way of changing the text the cell display instead of the true/false that the value is set to.
Example. I have a column that informs if the object is open(true) or closed(false). Instead of showing true/false I would like to show open/closed.
The column is "State". It is a boolean attribute. Is it possible to make this only on the html or should I change something in the component file? (It's angular)
<table class="table table-dark table-condensed table-bordered table-striped table-hover">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">State</th>
<th scope="col">Resolved By</th>
<th scope="col">Hours to resolve</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let bug of bugs">
<th scope = "row">{{bug.id}}
<td>{{bug.name}}</td>
<td>{{bug.description}}</td>
<td>{{bug.state}}</td>
<td>{{bug.resolvedBy}}</td>
<td>{{bug.hoursToResolve}}</td>
</tr>
</tbody>
</table>
</div>
Thanks!
CodePudding user response:
Great example for a ternary operator:
<table class="table table-dark table-condensed table-bordered table-striped table-hover">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">State</th>
<th scope="col">Resolved By</th>
<th scope="col">Hours to resolve</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let bug of bugs">
<th scope = "row">{{bug.id}}
<td>{{bug.name}}</td>
<td>{{bug.description}}</td>
<td>{{bug.state ? 'True Value Here' : 'False Value Here'}}</td>
<td>{{bug.resolvedBy}}</td>
<td>{{bug.hoursToResolve}}</td>
</tr>
</tbody>
</table>
</div>