javascript - कोणीय 2: एक सरणी में परिवर्तनों का पता लगाने के लिए कैसे?(@ प्रॉपर्टी संपत्ति)




angular typescript (4)

आप IterableDiffers उपयोग कर सकते हैं

यह *ngFor द्वारा उपयोग किया जाता है

constructor(private _differs: IterableDiffers) {}

ngOnChanges(changes: SimpleChanges): void {
  if (!this._differ && value) {
     this._differ = this._differs.find(value).create(this.ngForTrackBy);
  }
}

ngDoCheck(): void {
  if (this._differ) {
    const changes = this._differ.diff(this.ngForOf);
    if (changes) this._applyChanges(changes);
  }
}

मेरे पास एक अभिभावक घटक है जो एक ऐजैक्स अनुरोध का उपयोग करके वस्तुओं की एक सरणी को पुनः प्राप्त करता है।

इस घटक में दो बच्चे घटक हैं: उनमें से एक पेड़ की संरचना में वस्तुओं को दिखाता है और दूसरा एक तालिका प्रारूप में इसकी सामग्री का प्रतिपादन करता है। माता-पिता अपने बच्चों को एक @input संपत्ति के माध्यम से सरणी पास करते हैं और वे सामग्री को ठीक से प्रदर्शित करते हैं। सब कुछ उम्मीद के मुताबिक।

समस्या तब होती है जब आप ऑब्जेक्ट के भीतर कुछ फ़ील्ड बदलते हैं: चाइल्ड घटकों को उन परिवर्तनों के बारे में सूचित नहीं किया जाता है। यदि आप मैन्युअल रूप से इसके चर के लिए सरणी को पुन: असाइन करते हैं तो परिवर्तन केवल ट्रिगर होते हैं।

मुझे नॉकआउट जेएस के साथ काम करने की आदत है और मुझे अवलोकन योग्य एरा के समान प्रभाव प्राप्त करने की आवश्यकता है।

मैंने DoCheck के बारे में कुछ पढ़ा है लेकिन मुझे यकीन नहीं है कि यह कैसे काम करता है।


आप हमेशा इसे खाली सरणी के साथ जोड़कर सरणी के लिए एक नया संदर्भ बना सकते हैं:

this.yourArray = [{...}, {...}, {...}];
this.yourArray[0].yourModifiedField = "whatever";

this.yourArray = [].concat(this.yourArray);

ऊपर दिया गया कोड सरणी संदर्भ को बदल देगा और यह बच्चों के घटकों में OnChanges तंत्र को ट्रिगर करेगा।


यह पहले से ही उत्तर दिखाई देता है। हालांकि भविष्य की समस्या चाहने वालों के लिए, मैं कुछ याद करना चाहता था जब मैं शोध कर रहा था और मेरे पास एक परिवर्तन का पता लगाने वाली समस्या को डीबग करना था। अब, मेरा मुद्दा थोड़ा अलग-थलग था, और मेरे अंत में एक मूर्खतापूर्ण गलती थी, लेकिन फिर भी प्रासंगिक। जब आप Array या Object के संदर्भ में मानों को अपडेट कर रहे हैं, तो सुनिश्चित करें कि आप सही दायरे में हैं। मैंने खुद को setInterval(myService.function, 1000) का उपयोग करके एक जाल में सेट किया, जहां myService.function() एक सार्वजनिक सरणी के मूल्यों को अपडेट करेगा, मैंने सेवा के बाहर उपयोग किया। यह वास्तव में कभी भी सरणी को अद्यतन नहीं करता था, क्योंकि बाध्यकारी बंद था, और सही उपयोग सेट किया जाना चाहिए था setInterval(myService.function.bind(this), 1000) । मैंने अपना समय परिवर्तन का पता लगाने वाले हैक की कोशिश में बर्बाद कर दिया, जब यह एक मूर्खतापूर्ण / सरल भूल थी। परिवर्तन का पता लगाने के समाधान की कोशिश करने से पहले एक अपराधी के रूप में गुंजाइश को खत्म करें; यह आपको कुछ समय बचा सकता है।


यह मेरे लिए काम कर रहा है:

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent implements DoCheck {

  @Input() changeArray: MyClassArray[]= [];
  private differ: IterableDiffers;

  constructor(private differs: IterableDiffers) {
    this.differ = differs;
  }

  ngDoCheck() {
    const changes = this.differ.find(this.insertedTasks);
    if (changes) {
      this.myMethodAfterChange();
  }

}






typescript