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

89

Ссылка на https://angular.io/docs/ts/latest/guide/displaying-data.html и стек. Как проверить пустой объект в шаблоне angular 2 с помощью * ngIf, все еще получающего синтаксическую ошибку, сам контекст undefined. Если я удалю условие * 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[];

Любая помощь была бы замечательной.

angular angular2-template Картигеян Велласами
источник
"выдает синтаксическую ошибку" какое именно сообщение об ошибке?
Гюнтер Цёхбауэр
ОРИГИНАЛЬНОЕ ИСКЛЮЧЕНИЕ: TypeError: self.context.teamMembers не является функцией для * ngIf = "teamMembers.length> 0", я попробую с ответом ниже 1 мин,
пожалуйста

Ответы:

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

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

Гюнтер Цёхбауэр
источник
3
Вот правильная ссылка на safe navigation operator: angular.io/guide/template-syntax#safe-navigation-operator
Майкл Чеховски
Это может вызвать ошибку. Оператор '>' не может быть применен к типам 'boolean' и 'number'. при оптимизации сборки с --aot или прод
Криш
18

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

AishApp
источник
2

Может быть, небольшой перебор, но созданная библиотека 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>
Алексей Хименко
источник
1

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

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

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

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

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

Друта Руслан
источник
0

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

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

Митчелл Матула
источник