Helpex - Trao đổi & giúp đỡ Đăng nhập

Cách kiểm tra đối tượng trống trong mẫu góc 2 bằng cách sử dụng * ngIf

Lý Thanh Thu
· 08:30 09/05/2016
6 ngày trước

Tôi muốn kiểm tra xem đối tượng của tôi có trống không, không hiển thị phần tử của tôi và đây là mã của tôi:

<div class="comeBack_up" *ngIf="previous_info != {}">
   <a 
      [routerLink]="['Inside_group_page',{'name':previous_info.path | dotTodash }]"
      >
        {{previous_info.title}}
   </a>
</div>

nhưng mã của tôi là sai, cách tốt nhất để làm điều này là gì?

69 hữu ích 2 bình luận 140k xem chia sẻ
Hồ Việt Thanh
· 08:35 09/05/2016
08:35:06 09/05/2016

Điều này sẽ làm những gì bạn muốn:

<div class="comeBack_up" *ngIf="(previous_info | json) != ({} | json)">

hoặc ngắn hơn

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

Mỗi đối tượng {}tạo ra một thể hiện mới và việc ====so sánh các thể hiện đối tượng khác nhau luôn dẫn đến kết quả false. Khi chúng được chuyển đổi thành chuỗi ===kết quả thànhtrue

Ví dụ về Plunker

136 hữu ích 3 bình luận chia sẻ
Lê Tường Vy
· 09:13 09/05/2016
09:13:17 09/05/2016

Bạn cũng có thể sử dụng một cái gì đó như vậy:

<div class="comeBack_up" *ngIf="isEmptyObject(previous_info)"  >

với isEmptyObjectphương thức được xác định trong thành phần của bạn:

isEmptyObject(obj) {
  return (obj && (Object.keys(obj).length === 0));
}
38 hữu ích 5 bình luận chia sẻ
Tạ Gia Nhi
· 19:43 10/06/2019
19:43:59 10/06/2019

Từ những người trả lời ở trên, cách sau không hoạt động hoặc ít thích hợp hơn:

  • (previous_info | json) != '{}'chỉ hoạt động cho {}trường hợp trống, không cho nullhoặc undefinedtrường hợp
  • Object.getOwnPropertyNames(previous_info).lengthcũng không hoạt động, vì Objectkhông thể truy cập được trong mẫu
  • Tôi không muốn tạo một biến chuyên dụng this.objectLength = Object.keys(this.previous_info).length !=0;
  • Tôi không muốn tạo một chức năng chuyên dụng

    isEmptyObject(obj) {
       return (obj && (Object.keys(obj).length === 0));
    }
    

Giải pháp: keyvalue pipe cùng với ?. (nhà điều hành điều hướng an toàn); và nó có vẻ đơn giản.

Nó hoạt động tốt khi previous_info = nullhoặc previous_info = undefinedhoặc previous_info = {}và được coi là giá trị giả.

<div  *ngIf="(previous_info | keyvalue)?.length">

keyvalue - Chuyển đổi Đối tượng hoặc Bản đồ thành một mảng các cặp giá trị khóa.

? - Toán tử điều hướng an toàn Angular (?.) Là một cách thông thạo và thuận tiện để bảo vệ khỏi null và undefined

DEMO: demo với góc 9, mặc dù nó cũng hoạt động cho các phiên bản trước

33 hữu ích 5 bình luận chia sẻ
Trần Kỳ Anh
· 17:57 09/04/2017
17:57:55 09/04/2017

Các câu trả lời trên là được. Nhưng tôi đã tìm thấy một tùy chọn thực sự tốt để sử dụng sau trong chế độ xem:

{{before_info? .title}}

câu hỏi có thể trùng lặp Angular2 - lỗi nếu không kiểm tra xem {{object.field}} có tồn tại không

12 hữu ích 1 bình luận chia sẻ
Lý Tuyết Nhung
· 07:36 15/09/2017
07:36:50 15/09/2017

Điều này đã làm việc cho tôi:

Kiểm tra thuộc lengthtính và sử dụng ?để tránh undefinedsai sót.

Vì vậy, ví dụ của bạn sẽ là:

<div class="comeBack_up" *ngIf="previous_info?.length">

CẬP NHẬT

Thuộc tính length chỉ tồn tại trên mảng. Vì câu hỏi là về các đối tượng, hãy sử dụng Object.getOwnPropertyNames(obj)để lấy một mảng thuộc tính từ đối tượng. Ví dụ trở thành:

<div class="comeBack_up" *ngIf="previous_info  && Object.getOwnPropertyNames(previous_info).length > 0">

Các previous_info &&được thêm vào để kiểm tra xem các đối tượng tồn tại. Nếu nó đánh giá cho truecâu lệnh tiếp theo sẽ kiểm tra xem đối tượng có ít nhất trên proporty hay không. Nó không kiểm tra xem thuộc tính có giá trị hay không.

4 hữu ích 1 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ javascript typescript angular , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm