Блог

Главная - Вопросы по программированию - Как скрыть строки, если результат равен false (угловой)

Как скрыть строки, если результат равен false (угловой)

#angular #firebase

#угловой #firebase

Вопрос:

В настоящее время мое хранилище результатов в моей firebase имеет значение true или false, и я хочу отображать вывод пользователя, только если результат равен true.

 <html>
<tr *ngFor="let content of user">
                <td>{{content.fullname}}</td>
                <td>{{content.createdIndividualAt | date}}</td>
                <td>{{getMember(content.hasMembership)}}</td>
            </tr>
</html>



constructor(private fb: FormBuilder,
private individualSrv: IndividualService,
) {
let res = individualSrv.getAll();
res.then(result => {
  result.subscribe(async _user => {
    this.user = _user;
  });
});

   getMember(hasMembership: boolean): string {
if(hasMembership == true) {
  return 'Is member'; }
else {
  return ''
 }  
}

Ответ №1:

Не нарушайте структуру tr / td, добавляя другие элементы, вы можете получить более чистый и согласованный результат, просто используя ng-container :

 <table>
    <ng-container *ngFor="let content of user">
             <tr *ngIf="content.hasMembership">
                    <td >{{content.fullname}}</td>
                    <td>{{content.createdIndividualAt | date}}</td>
                    <td>{{getMember(content.hasMembership)}}</td>
             </tr>
     </ng-container>
</table>

PS: Не добавляйте html-теги в свой компонент и не используйте async , если вы ничего не ожидаете!

Ответ №2:

Вы могли бы внести следующие изменения, использовать ngIf для отображения и наоборот скрыть

 <html>
    <table>
        <tr *ngFor="let content of user">
            <span *ngIf="content.hasMembership">
                <td >{{content.fullname}}</td>
                <td>{{content.createdIndividualAt | date}}</td>
                <td>{{getMember(content.hasMembership)}}</td>
            </span>
        </tr>
    </table>    
</html>

Комментарии:

1. Лучше сделать это с помощью ng-контейнера. Иначе вы вводите бесполезные элементы в DOM