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

Program / 글쓴이

에 대해 참조 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"데이터가 있는지 확인하는 데 사용할 수 있습니다.

답변

약간의 과잉이지만 객체, 세트, ​​맵 또는 배열이 비어 있지 않은지 확인하는 라이브러리 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>

답변

당신이 사용할 수있는

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

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

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

in array가 무언가가 될 경우 다른 것은 표시하지 않습니다.

답변

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

* ngIf가 필요한 이유는 나머지 OnInit 작업이 발생하기 전에 해당 변수의 길이를 확인하고 “정의되지 않은 길이”오류를 던지기 때문입니다. 그래서 당신은? 아직 존재하지 않을 것이기 때문에 곧있을 것입니다.

답변