Angular2 * ngIf проверить длину массива объектов в шаблоне

Ссылка на https://angular.io/docs/ts/latest/guide/displaying-data.html и стек. Как проверить пустой объект в шаблоне angular 2 с помощью * ngIf, все еще получая синтаксическую ошибку, сам контекст не определен. Если я удаляю условие * ngIf, тогда я получаю значения в teamMembers, если я добавляю в него какое-то значение, чтобы получить доступ к значениям в teamMembers.

мой объект teamMember - [ ] array я пытаюсь проверить, что массив условий пуст по размеру.

Пытается:

<div class="row" *ngIf="(teamMembers | json) != '{}'">

а также

<div class="row" *ngIf="teamMembers.length > 0"> //Check length great than
                                                 throwing syntax error
            <div class="col-md-12">
                <h4>Team Members</h4>
                <ul class="avatar" *ngFor="let member of teamMembers">
                    <li><a href=""><gravatar-image [size]="80" [email]="member.email"></gravatar-image></a></li>
                </ul>
            </div>
        </div>

Составная часть:

@Component({
selector: 'pbi-editor',
})
export class AppComponent implements OnInit {
teamMembers: User[];

Любая помощь будет отличной.

Ответы

Ответ 1

<div class="row" *ngIf="teamMembers?.length > 0">

Это сначала проверяется, если teamMembers имеет значение, и если teamMembers не имеет значения, он не пытается получить доступ к length из undefined, потому что первая часть условия уже не выполняется.

Ответ 2

Вы можете использовать *ngIf="teamMembers != 0" для проверки наличия данных

Ответ 3

Ты можешь использовать

<div class="col-sm-12" *ngIf="event.attendees?.length">

Без event.attendees?.length > 0 или даже event.attendees?length != 0

Потому что ?.length уже возвращает логическое значение.

Если в массиве будет что-то, он будет отображать это еще нет.

Ответ 4

Возможно небольшое перерасход, но созданная библиотека ngx-if-empty-or-has-items проверяет, не является ли объект, набор, карта или массив не пустыми. Может быть, это кому-нибудь поможет. Он имеет ту же функциональность, что и ngIf (тогда поддерживается синтаксис else и as).

arrayOrObjWithData = ['1'] || {id: 1}

<h1 *ngxIfNotEmpty="arrayOrObjWithData">
  You will see it
</h1>

 or 
 // store the result of async pipe in variable
 <h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
  {{obj.id}}
</h1>

 or

noData = [] || {}
<h1 *ngxIfHasItems="noData">
   You will NOT see it
</h1>

Ответ 5

Эта статья помогла мне понять, почему она тоже не работает для меня. Это дает мне урок, чтобы думать о загрузке веб-страницы и о том, как angular 2 взаимодействует как временная шкала, а не только момент времени, о котором я думаю. Я не видел, чтобы кто-то еще упоминал об этом, поэтому я...

Причина, по которой требуется * ngIf, потому что он попытается проверить длину этой переменной до того, как остальная часть материала OnInit произойдет, и выбросить ошибку "длина undefined". Так вот почему вы добавляете? потому что его пока не будет, но скоро.