Làm thế nào để loại bỏ hai chiều dữ liệu ràng buộc trong góc -2/4

Question

Tôi đang phát triển một thả xuống chọn nhiều trong góc mà cũng có tìm kiếm. Đó là khi tôi phân tích cú pháp đầu vào được đưa ra từ trường nhập thông qua dữ liệu chủ của tôi và chỉ hiển thị các nội dung được lọc trong DOM. Đây là chức năng của tôi:

modifyFilter(value: any) { 
     console.log('value', value); //The value passed from DOM 
     this.filterContent = this.catalogManufacturerNames; /******/ 
     for(let i=0; i<this.catalogManufacturerNames.length;i++) { 
     /* Search catalogManufacturerNames for the value and splice all 
     filterContent not having the matching value */  
     } 
    } 

Vấn đề với mã là mọi phương pháp modifyFilter được gọi là catalogManufacturerNames cũng được thay đổi cùng với filterContent. Vì vậy, mỗi khi tôi gọi modifyFilter, hàng được đánh dấu bằng/******/filterContent được gán cho filterContent trước đó hơn toàn cầu và có lẽ không thay đổi catalogManufacturerNames. Tôi nghĩ rằng vấn đề là filterContent và catalogManufacturerNames bị ràng buộc hai chiều, nhưng tôi không biết cách sửa đổi nó theo yêu cầu của mình. Hoặc là có cách nào khác để đi về nó. Đề xuất được hoan nghênh.

Answer 1

Trong trường hợp này, bạn phải sử dụng Đối tượng.assign. Nó sẽ tạo một bản sao đối tượng/biến của bạn để khi bạn thực hiện bất kỳ bộ lọc nào trên đối tượng chính, nó sẽ không phản ánh trong đối tượng được sao chép và ngược lại.

Bạn có thể sử dụng {},[] theo yêu cầu của mình.

{}: cho đối tượng duy nhất

[]: cho bộ sưu tập của các đối tượng

let copiedItem = Object.assign({}, copiedItem , PrimaryItem); 

Vui lòng tham khảo để xem chi tiết: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Answer 2

Như một sự thay thế đơn giản để sử dụng Object.assign, bạn có thể sử dụng toán tử spread để sao chép các thuộc tính của đối tượng liên kết kép sang đối tượng khác:

this.filterContent = {...this.catalogManufacturerNames}; 

tham khảo: http://redux.js.org/docs/recipes/UsingObjectSpreadOperator.html