Angular2 * ngIf는 템플릿에서 객체 배열 길이를 확인합니다.

Angular2 * ngIf는 템플릿에서 객체 배열 길이를 확인합니다.

---

에 대해 참조 https://angular.io/docs/ts/latest/guide/displaying-data.html 및 스택 ngIf이 * 사용하여 각 2 템플릿에 빈 개체를 확인하는 방법을 여전히 구문 오류 자체 문맥에 정의되지 않은 받고. * 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"데이터가 있는지 확인하는 데 사용할 수 있습니다.

---

당신이 사용할 수있는

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

없이 event.attendees?.length > 0또는 심지어event.attendees?length != 0

?.length이미 부울 값을 반환 하기 때문 입니다.

배열이 무언가가 될 것이라면 다른 것을 표시하지 않을 것입니다.

---

약간 과잉 일 수도 있지만 라이브러리 ngx-if-empty-or-has-items 를 생성하여 객체, 세트, ​​맵 또는 배열이 비어 있지 않은지 확인합니다. 누군가에게 도움이 될 수도 있습니다. ngIf와 기능이 동일합니다 (then, 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>

---

이 기사는 왜 그것이 저에게도 효과가 없는지 알아내는 데 많은 도움이되었습니다. 웹 페이지 로딩과 앵귤러 2가 내가 생각하는 시점이 아닌 타임 라인으로 상호 작용하는 방법을 생각할 수있는 교훈을줍니다. 다른 사람이이 점을 언급하는 것을 보지 못했기 때문에 ...

The reason the *ngIf is needed because it will try to check the length of that variable before the rest of the OnInit stuff happens, and throw the "length undefined" error. So thats why you add the ? because it won't exist yet, but it will soon.

참고URL : https://stackoverflow.com/questions/37543362/angular2-ngif-check-object-array-length-in-template