Góc 2 - * ngFor với các phím ống không được làm mới khi đối tượng được thay đổi

Question

Tôi đang sử dụng các phím ống trong vòng lặp * ngfor. Dữ liệu được cấp bằng JSON.

@Pipe({ 
     name: 'keys' 
    }) 
    export class KeysPipe implements PipeTransform { 
     transform(value, args: string[]): any { 
     if (!value) { 
      return value; 
     } 

     let keys = []; 
     for (let key in value) { 
      keys.push({key: key, value: value[key]}); 
     } 
     return keys; 
     } 
    } 

-

<div *ngFor="let item of jsonObject | keys"> 
     <p>{{ item.value.code }}</p> 
</div> 

Vấn đề là khi tôi xóa trên các phần tử trong JSON, ngFor không được cập nhật.

Tôi đã thử hai tùy chọn đã:

• gọi this.applicationRef.tick(); sau khi xóa phần tử, không thay đổi
• ống không tinh khiết "tinh khiết: false". Điều này gây ra việc sử dụng bộ nhớ khổng lồ trong chrome trong hàng trăm MB và tôi phải giết quá trình này.

Nếu có cách nào khác?

Cảm ơn!

Answer 1

Một cách mà bạn có thể thử:

delete(id) { 
    this.jsonObject = this.jsonObject.filter(x => x.id !== id); 
} 

Bằng cách này bạn sẽ không đột biến mảng gốc. Đó là điều crutial cho ống

Xem thêm

• NgFor doesn't update data with Pipe in Angular2
• Unraveling Angular 2 book, Chapter 1, Example 5

Answer 2

Tinh khiết ống không chạy trừ khi tham chiếu hoặc giá trị được thay đổi. Để sửa lỗi này thêm pure: false vào trang trí ống của bạn. Xem Pipes

ví dụ:

@Pipe({ 
    name: 'keyVal', 
    pure: false 
}) 
export class KeyValPipe implements PipeTransform { 
    ... 
} 

EDIT tôi didnt thấy rằng OP đã làm điều này. Một tùy chọn khác là đặt biến tạm thời và sau đó gán jsonObject cho nó, do đó tạo một tham chiếu mới. Bạn cũng có thể thử một bản sao sâu từ tạm thời để JSONObject