Angular2 * ngNếu kiểm tra độ dài mảng đối tượng trong mẫu

Question 1

Đã tham chiếu đến https://angular.io/docs/ts/latest/guide/displaying-data.html và stack Cách kiểm tra đối tượng trống trong mẫu angle 2 bằng cách sử dụng * ngNếu vẫn gặp lỗi cú pháp, ngữ cảnh không xác định. Nếu tôi loại bỏ điều kiện * ngIf thì tôi nhận được các giá trị trong teamMembers nếu tôi đẩy một số giá trị vào đó để tôi có thể truy cập các giá trị trong teamMembers.

teamMemberđối tượng của tôi là [ ] arraytôi đang cố gắng kiểm tra mảng điều kiện trống theo kích thước.

Thử nghiệm:

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

và

<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>

Thành phần:

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

Bất kỳ sự trợ giúp nào đều sẽ là tuyệt vời.

Question 2

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

Đầu tiên nếu kiểm tra này teamMemberscó một giá trị và nếu teamMemberskhông có một giá trị, nó không cố gắng truy cập lengthcác undefinedvì phần đầu của tình trạng này đã thất bại.

Question 3

Bạn có thể sử dụng *ngIf="teamMembers != 0"để kiểm tra xem có dữ liệu hay không

Question 4

Có thể hơi quá mức cần thiết nhưng đã tạo thư viện ngx-if-blank-or-has-items nó sẽ kiểm tra xem một đối tượng, tập hợp, bản đồ hoặc mảng có trống không. Có thể nó sẽ giúp ích cho ai đó. Nó có chức năng tương tự như ngIf (cú pháp then, else và 'as' được hỗ trợ).

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>

Question 5

Bạn có thể dùng

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

Không có event.attendees?.length > 0hoặc thậm chíevent.attendees?length != 0

Vì ?.lengthđã trả về giá trị boolean .

Nếu trong mảng sẽ là một cái gì đó, nó sẽ hiển thị nó còn không.

Question 6

Bài viết này đã giúp tôi rất nhiều tìm ra lý do tại sao nó cũng không hoạt động với tôi. Nó cho tôi một bài học để nghĩ về việc tải trang web và cách góc 2 tương tác với nhau như một dòng thời gian chứ không chỉ là thời điểm mà tôi đang nghĩ đến. Tôi không thấy ai khác đề cập đến điểm này, vì vậy tôi sẽ ...

Lý do * ngIf là cần thiết vì nó sẽ cố gắng kiểm tra độ dài của biến đó trước khi phần còn lại của nội dung OnInit xảy ra và tạo ra lỗi "độ dài không xác định". Vì vậy, đó là lý do tại sao bạn thêm? bởi vì nó sẽ không tồn tại, nhưng nó sẽ sớm thôi.