NgFor Angular2 में पाइप के साथ डेटा अपडेट नहीं करता है




angular2-template angular2-directives (6)

अतिरिक्त पैरामीटर को पाइप में जोड़ें, और सरणी परिवर्तन के ठीक बाद इसे बदलें, और यहां तक ​​कि शुद्ध पाइप के साथ भी, सूची ताज़ा हो जाएगी

आइए आइटम का आइटम | पाइप: param

इस परिदृश्य में, मैं छात्रों की सूची (सरणी) को ngFor साथ देखने के लिए प्रदर्शित कर रहा हूँ:

<li *ngFor="#student of students">{{student.name}}</li>

जब भी मैं सूची में अन्य छात्र को जोड़ता हूं तो यह अद्भुत है।

हालाँकि, जब मैं इसे छात्र के नाम से filter करने के लिए pipe देता हूँ,

<li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>

यह सूची को तब तक अपडेट नहीं करता है जब तक कि मैं फ़िल्टरिंग छात्र के नाम फ़ील्ड में कुछ टाइप नहीं करता।

यहाँ plnkr लिंक दिया plnkr

Hello_world.html

<h1>Students:</h1>
<label for="newStudentName"></label>
<input type="text" name="newStudentName" placeholder="newStudentName" #newStudentElem>
<button (click)="addNewStudent(newStudentElem.value)">Add New Student</button>
<br>
<input type="text" placeholder="Search" #queryElem (keyup)="0">
<ul>
    <li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>
</ul>

sort_by_name_pipe.ts

import {Pipe} from 'angular2/core';

@Pipe({
    name: 'sortByName'
})
export class SortByNamePipe {

    transform(value, [queryString]) {
        // console.log(value, queryString);
        return value.filter((student) => new RegExp(queryString).test(student.name))
        // return value;
    }
}

इस उपयोग के मामले में मैंने डेटा फ़िल्टरिंग के लिए ts फ़ाइल में अपने पाइप का उपयोग किया। शुद्ध पाइप का उपयोग करने की तुलना में यह प्रदर्शन के लिए बहुत बेहतर है। इस तरह से ts में उपयोग करें:

import { YourPipeComponentName } from 'YourPipeComponentPath';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

  YourFunction(value) {
    this.pipe.transform(value, 'pipeFilter');
  }
}

वर्कअराउंड: कंस्ट्रक्टर में मैन्युअल रूप से आयात करें और इस पाइप का उपयोग करके कॉल ट्रांस्फ़ॉर्म विधि

constructor(
private searchFilter : TableFilterPipe) { }

onChange() {
   this.data = this.searchFilter.transform(this.sourceData, this.searchText)}

वास्तव में आपको एक पाइप की भी आवश्यकता नहीं है


शुद्ध करने के बजाय: असत्य। आप घटक को मान की गहराई से प्रतिलिपि बना सकते हैं और प्रतिस्थापित कर सकते हैं। यह सामग्री = Object.assign ([], NEW_ARRAY); जहाँ NEW_ARRAY संशोधित सरणी है।

यह कोणीय 6 के लिए काम करता है और अन्य कोणीय संस्करणों के लिए भी काम करना चाहिए।


डेमो प्लंकर

आपको ChangeDetectionStrategy को बदलने की आवश्यकता नहीं है। एक स्टेटफुल पाइप को लागू करना सब कुछ काम करने के लिए पर्याप्त है।

यह एक स्टेटफुल पाइप है (कोई अन्य परिवर्तन नहीं किए गए थे):

@Pipe({
  name: 'sortByName',
  pure: false
})
export class SortByNamePipe {
  tmp = [];
  transform (value, [queryString]) {
    this.tmp.length = 0;
    // console.log(value, queryString);
    var arr = value.filter((student)=>new RegExp(queryString).test(student.name));
    for (var i =0; i < arr.length; ++i) {
        this.tmp.push(arr[i]);
     }

    return this.tmp;
  }
}

कोणीय प्रलेखन से

शुद्ध और अशुद्ध पाइप

पाइप की दो श्रेणियां हैं: शुद्ध और अशुद्ध। डिफ़ॉल्ट रूप से पाइप शुद्ध हैं। आपके द्वारा अब तक देखा गया हर पाइप शुद्ध रहा है। आप अपने शुद्ध ध्वज को असत्य पर स्थापित करके एक पाइप अशुद्ध बनाते हैं। आप इस तरह से FlyHeroesPipe अशुद्ध बना सकते हैं:

@Pipe({ name: 'flyingHeroesImpure', pure: false })

ऐसा करने से पहले, शुद्ध और अशुद्ध के बीच के अंतर को समझें, जो एक शुद्ध पाइप से शुरू होता है।

शुद्ध पाइप कोणीय केवल शुद्ध पाइप को निष्पादित करता है जब यह इनपुट मूल्य में शुद्ध परिवर्तन का पता लगाता है। एक शुद्ध परिवर्तन या तो एक आदिम इनपुट मूल्य (स्ट्रिंग, संख्या, बूलियन, प्रतीक) या एक बदले हुए ऑब्जेक्ट संदर्भ (दिनांक, एरे, फ़ंक्शन, ऑब्जेक्ट) के लिए एक परिवर्तन है।

कोणीय (समग्र) वस्तुओं के भीतर परिवर्तन की अनदेखी करता है। यदि आप इनपुट महीना बदलते हैं, तो इनपुट सरणी में जोड़ें, या इनपुट ऑब्जेक्ट प्रॉपर्टी को अपडेट करें तो यह शुद्ध पाइप नहीं कहलाएगा।

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

इस कारण से, एक शुद्ध पाइप बेहतर होता है जब आप परिवर्तन का पता लगाने की रणनीति के साथ रह सकते हैं। जब आप नहीं कर सकते, तो आप अशुद्ध पाइप का उपयोग कर सकते हैं।





angular-pipe