Angular2 * ngЯкщо перевірити довжину масиву об'єкта в шаблоні

Посилається на 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[];

Будь-яка допомога була б чудовою.

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

Це спочатку перевіряє, чи teamMembersмає значення, а якщо teamMembersне має значення, він не намагається отримати доступ lengthдо, undefinedоскільки перша частина умови вже не працює.

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

Можливо, невеликий надмір, але створена бібліотека 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>

Можна використовувати

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

Без event.attendees?.length > 0або навітьevent.attendees?length != 0

Тому що ?.lengthвже повертає логічне значення.

Якщо в масиві буде щось, воно відображатиме це інше, ні.

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

Причина * ngIf потрібна, оскільки вона спробує перевірити довжину цієї змінної до того, як відбудеться решта питань OnInit, і викине помилку "length undefined". Ось чому ви додаєте? тому що він ще не існуватиме, але скоро буде.