कोणीय 4 घटक दो तरह से बाध्यकारी मुद्दा

Question

मैं एक सरणी है:

const a = [apple,ball,cat] 

मैं दो घटकों को यह गुजर रही है:

<app-header [appData]="data" ></app-header> 

<list-todo [appData]="data" [getData]="getData" [setData]="setData" ></list-todo> 

appHeader घटक में,

export class appHeader { 
    @Input('appData') data : any 

    clear(){ 
    this.data = [] 
    } 
} 

clear() फ़ंक्शन प्रदर्शन listTodo सह में सरणी को प्रभावित नहीं कर रहा है mponent। क्या इस मुद्दे को हल करने का कोई तरीका है?

मैंने गुणों के साथ बाध्यकारी के दो तरीकों की भी जांच की लेकिन अब कुछ भी काम नहीं किया!

Answer 1

this.data = [] करने से, आप अपने सरणी खाली नहीं कर रहे हैं, लेकिन एक नया उदाहरण इसकी जगह। आपका मूल घटक और अन्य बच्चा घटक अभी भी मूल उदाहरण का जिक्र कर रहा है, जिसके परिणामस्वरूप आप जिस व्यवहार का वर्णन करते हैं।

एक समाधान के बजाय जगह की मूल सरणी खाली करने के लिए है:

clear() { 
    this.data.length = 0; 
} 

ऐसा करने में, सभी घटकों को एक ही सरणी उदाहरण की चर्चा करते हुए रखेंगे, और अपने राज्य को सही ढंग से परिलक्षित होगा।

Answer 2

Input बाइंडिंग यूनिडायरेक्शनल तरीके से बाल घटक को डेटा भेजती है, इसलिए जब हम बाल घटक डेटा को संशोधित करते हैं तो यह प्रवाह नहीं होता है। चूंकि आप बच्चे के घटक में this.appData पर नई रिक्त सरणी निर्दिष्ट कर रहे हैं (यह प्रवाह नहीं होता है)। इस मामले में आप दो 0 बाध्यकारी होने के लिए बाध्यकारी appData संपत्ति को बदलने पर विचार कर सकते हैं। ताकि बच्चे के घटक में कुछ अपडेट मूल घटक में सापेक्ष संपत्ति को अपडेट कर सकें, लेकिन हाँ यह जादूगर नहीं होता है। आप मैन्युअल रूप से डेटा अपडेट करना पड़ता है;

एक ही बात काम कर रहे बनाने के लिए), तो आपको Output के माध्यम से माता-पिता component को वस्तु की changed प्रतिलिपि फेंकना [(appData)]="data" तरह से बाध्यकारी है (यह EventEmitter का उपयोग करता है माता पिता compoent करने के लिए डेटा का उत्सर्जन करने के लिए)।

AppComponent खाका

<app-header [appData]="data" ></app-header> 
<list-todo [(appData)]="data"></list-todo> 

ListTodoComponent

@Component({ 
    selector: 'list-todo', 
    template: ` 
    <ul> 
     <li *ngFor="let item of appData">{{item}}</li> 
    </ul> 
    <button (click)="clear()">Clear</button> 
    ` 
}) 
export class ListTodoComponent { 
    @Input() appData; 
    @Output() appDataChange: EventEmitter<any> = new EventEmitter<any>(); 

    clear(){ 
    this.appData = []; 
    //this emit is important to send data back to parent. 
    //make sure you should have `Change` prefix to bounded value, like `appData` + `Change` = `appDataChange`, 
    //which ultimately saves few lines of code. 
    this.appDataChange.emit(this.appData); 
    } 
} 

Demo Here