এনগফোর্ড পাইপ ইন অ্যাঙ্গুলার 2 এর সাথে ডেটা আপডেট করে না

Question

এই দৃশ্যে, আমি শিক্ষার্থীদের (অ্যারে) এর সাথে ভিউটিতে একটি তালিকা প্রদর্শন করছি ngFor:

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

এটি দুর্দান্ত যে এটি আপডেট হওয়ার সাথে সাথে আমি যখনই অন্য ছাত্রদের তালিকায় যুক্ত করি।

যাইহোক, যখন আমি এটি একটি দিতে pipeকরার filterশিক্ষার্থীর নাম দ্বারা,

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

আমি ফিল্টারিং শিক্ষার্থীর নাম ক্ষেত্রে কিছু টাইপ না করা পর্যন্ত এটি তালিকা আপডেট করে না।

এখানে 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;
    }
}

---

Comments

যোগ pure:falseআপনার পাইপ, এবং changeDetection: ChangeDetectionStrategy.OnPushআপনার কম্পোনেন্ট হবে।

— এরিক মার্টিনেজ 18

ধন্যবাদ @ এরিকমার্টিনিজ এটা কাজ করে। তবে কি আপনি একটু ব্যাখ্যা করতে পারেন?

— চু পুত্র

এছাড়াও, আমি .test()আপনার ফিল্টার ফাংশন ব্যবহার না করার পরামর্শ দেব । এর কারণ, যদি ব্যবহারকারী কোনও স্ট্রিং ইনপুট করে যাতে এর মধ্যে বিশেষ অর্থ অক্ষর অন্তর্ভুক্ত থাকে: *বা +ইত্যাদি আপনার কোডটি ভেঙে যায়। আমার মনে হয় আপনার .includes()কাস্টম ফাংশন সহ কোয়েরি স্ট্রিংটি ব্যবহার করা বা এড়ানো উচিত ।

— ডিম 21

pure:falseআপনার পাইপকে রাষ্ট্রীয় যুক্ত করা এবং তৈরি করা সমস্যার সমাধান করবে। চেঞ্জডেস্টেকশনস্ট্রেজি পরিবর্তন করা প্রয়োজন হয় না।

— পিক্সেলবিট

যে কারও এটি পড়ার জন্য, কৌণিক পাইপগুলির জন্য ডকুমেন্টেশন আরও ভাল হয়েছে এবং এখানে আলোচিত একই জিনিসগুলির বেশিরভাগ অংশ গেছে। এটা দেখ.

— 0xcaff

Answer 1

সমস্যা এবং সম্ভাব্য সমাধানগুলি পুরোপুরি বুঝতে, পাইপ এবং উপাদানগুলির জন্য - আমাদের কৌনিক পরিবর্তন সনাক্তকরণ নিয়ে আলোচনা করা উচিত।

পাইপ পরিবর্তন সনাক্তকরণ

রাষ্ট্রহীন / খাঁটি পাইপ

ডিফল্টরূপে, পাইপগুলি রাষ্ট্রবিহীন / খাঁটি। স্টেটলেস / খাঁটি পাইপগুলি কেবল ইনপুট ডেটাগুলিকে আউটপুট ডেটাতে রূপান্তর করে। তারা কিছুই মনে রাখে না, তাই তাদের কোনও সম্পত্তি নেই - কেবল একটি transform()পদ্ধতি। কৌণিক স্ট্যাটাসহীন / খাঁটি পাইপের চিকিত্সা অনুকূল করতে পারে: যদি তাদের ইনপুটগুলি পরিবর্তন না হয় তবে পরিবর্তনগুলি সনাক্তকরণ চক্রের সময় পাইপগুলি কার্যকর করার প্রয়োজন হয় না। একটি নল জন্য যেমন {{power | exponentialStrength: factor}}, powerএবং factorইনপুট আছে।

এই প্রশ্নের জন্য "#student of students | sortByName:queryElem.value", studentsএবং queryElem.valueইনপুট হয় এবং পাইপ sortByNameরাষ্ট্রবিহীন / খাঁটি। studentsএকটি অ্যারে (রেফারেন্স)।

• যখন কোনও ছাত্র যুক্ত করা হয় তখন অ্যারের উল্লেখটি পরিবর্তিত studentsহয় না - পরিবর্তিত হয় না - সুতরাং রাষ্ট্রবিহীন / খাঁটি পাইপ কার্যকর হয় না।
• যখন ফিল্টার ইনপুটটিতে কিছু টাইপ করা হয় তখন queryElem.valueতা পরিবর্তিত হয়, সুতরাং স্টেটলেস / খাঁটি পাইপ কার্যকর করা হয়।

অ্যারে ইস্যুটি সংশোধন করার একটি উপায় হ'ল প্রতিটি শিক্ষার্থী যুক্ত হওয়ার সাথে সাথে অ্যারে রেফারেন্সটি পরিবর্তন করা - অর্থাত্ প্রতিটি সময় শিক্ষার্থী যুক্ত হওয়ার পরে একটি নতুন অ্যারে তৈরি করা। আমরা এটি দিয়ে এটি করতে পারি concat():

this.students = this.students.concat([{name: studentName}]);

যদিও এটি কাজ করে, addNewStudent()কেবলমাত্র আমরা পাইপ ব্যবহার করার কারণে আমাদের পদ্ধতিটি একটি নির্দিষ্ট উপায়ে কার্যকর করা উচিত নয়। আমরা push()আমাদের অ্যারেতে যুক্ত করতে ব্যবহার করতে চাই ।

রাষ্ট্রীয় পাইপ

রাষ্ট্রীয় পাইপগুলির স্টেট থাকে - তাদের সাধারণত বৈশিষ্ট্য থাকে, কেবল কোনও transform()পদ্ধতি নয়। তাদের ইনপুটগুলি পরিবর্তন না হলেও এমনকি তাদের মূল্যায়ন করা প্রয়োজন। যখন আমরা উল্লেখ করি যে একটি পাইপ স্থিতিশীল / অ-খাঁটি - pure: false- তবে যখনই অ্যাংুলারের পরিবর্তন সনাক্তকরণ সিস্টেম পরিবর্তনগুলির জন্য কোনও উপাদান পরীক্ষা করে এবং সেই উপাদানটি স্টেটফুল পাইপ ব্যবহার করে, তখন পাইপটির আউটপুট পরীক্ষা করা হবে কিনা, তার ইনপুট পরিবর্তন হয়েছে কি না।

এটি কম দক্ষ হলেও আমরা যা চাই তা মনে হচ্ছে, যেহেতু আমরা চাইছি studentsরেফারেন্স পরিবর্তিত না হয়েও পাইপটি কার্যকর করা হোক। যদি আমরা কেবল পাইপটিকে রাষ্ট্রীয় করে তুলি তবে আমরা একটি ত্রুটি পেয়েছি:

EXCEPTION: Expression 'students | sortByName:queryElem.value  in HelloWorld@7:6' 
has changed after it was checked. Previous value: '[object Object],[object Object]'. 
Current value: '[object Object],[object Object]' in [students | sortByName:queryElem.value

@ ড্র্রুমুরের জবাব অনুসারে , "এই ত্রুটিটি কেবলমাত্র ডেভ মোডে ঘটে (যা বিটা -0 হিসাবে ডিফল্টরূপে সক্ষম হয়) enableProdMode()app অ্যাপটি বুটস্ট্র্যাপ করার সময় আপনি যদি কল করেন, ত্রুটিটি নিক্ষেপ করা হবে না।" এর জন্য দস্তাবেজApplicationRef.tick() রাজ্য:

বিকাশ মোডে, আরও কোনও পরিবর্তন সনাক্ত না হয় তা নিশ্চিত করতে টিক () এছাড়াও দ্বিতীয় পরিবর্তন সনাক্তকরণ চক্র সম্পাদন করে। যদি এই দ্বিতীয় চক্রের সময় অতিরিক্ত পরিবর্তনগুলি গ্রহণ করা হয় তবে অ্যাপ্লিকেশনটিতে বাইন্ডিংগুলির পার্শ্ব-প্রতিক্রিয়া রয়েছে যা একক পরিবর্তন সনাক্তকরণের পাসে সমাধান করা যায় না। এই ক্ষেত্রে, কৌণিক একটি ত্রুটি নিক্ষেপ করে, যেহেতু একটি কৌণিক অ্যাপ্লিকেশনটিতে কেবল একটি পরিবর্তন সনাক্তকরণ পাস থাকতে পারে যার সময় সমস্ত পরিবর্তন সনাক্তকরণ সম্পূর্ণ করতে হবে।

আমাদের দৃশ্যে আমি বিশ্বাস করি ত্রুটিটি বোগাস / বিভ্রান্তিকর। আমাদের একটি রাষ্ট্রীয় পাইপ রয়েছে এবং প্রতিবার এটি আউটপুট পরিবর্তিত হতে পারে - এর পার্শ্ব প্রতিক্রিয়া থাকতে পারে এবং এটি ঠিক আছে। এনজিফোর্ড পাইপের পরে মূল্যায়ন করা হয়, সুতরাং এটি ঠিকঠাক কাজ করা উচিত।

তবে, এই ত্রুটিটি নিক্ষেপ করার সাথে আমরা সত্যিকার অর্থে বিকাশ করতে পারি না, সুতরাং পাইপ প্রয়োগের ক্ষেত্রে একটি অ্যারে সম্পত্তি (অর্থাত্ রাষ্ট্র) যুক্ত করা এবং সর্বদা সেই অ্যারেটি ফিরিয়ে ফেলা উচিত work এই সমাধানের জন্য @ পিক্সেলবিতের উত্তর দেখুন।

তবে, আমরা আরও দক্ষ হতে পারি এবং যেমনটি আমরা দেখতে পাব পাইপ প্রয়োগের জন্য আমাদের অ্যারে সম্পত্তি প্রয়োজন হবে না এবং দ্বিগুণ পরিবর্তন সনাক্তকরণের জন্য আমাদের কোনও কাজের প্রয়োজন হবে না।

উপাদান পরিবর্তন সনাক্তকরণ

ডিফল্টরূপে, প্রতিটি ব্রাউজার ইভেন্টে, কৌনিক পরিবর্তন সনাক্তকরণ প্রতিটি উপাদানকে এটি পরিবর্তন হয়েছে কিনা তা দেখার জন্য যায় - ইনপুট এবং টেম্পলেট (এবং সম্ভবত অন্যান্য জিনিস?) চেক করা হয়েছে।

যদি আমরা জানি যে কোনও উপাদান কেবল তার ইনপুট বৈশিষ্ট্যগুলি (এবং টেম্পলেট ইভেন্টগুলি) এবং ইনপুট বৈশিষ্ট্যগুলি অপরিবর্তনীয় উপর নির্ভর করে তবে আমরা আরও কার্যকর দক্ষ onPushপরিবর্তন সনাক্তকরণ কৌশলটি ব্যবহার করতে পারি । এই কৌশলটি সহ, প্রতিটি ব্রাউজার ইভেন্ট পরীক্ষা করার পরিবর্তে ইনপুটগুলি পরিবর্তন করা হয় এবং টেমপ্লেট ইভেন্টগুলি ট্রিগার করা হয় কেবল তখনই একটি উপাদান চেক করা হয়। এবং, স্পষ্টতই, আমরা Expression ... has changed after it was checkedএই সেটিংটি দিয়ে ত্রুটিটি পাই না । এটি কারণ যে কোনও onPushউপাদান আবার "চিহ্নিত" ( ChangeDetectorRef.markForCheck()) না হওয়া অবধি পুনরায় পরীক্ষা করা হয় না । সুতরাং টেম্পলেট বাইন্ডিংগুলি এবং রাষ্ট্রীয় পাইপ আউটপুটগুলি একবার কার্যকর করা / মূল্যায়ন করা হয়। স্টেটলেস / খাঁটি পাইপগুলির ইনপুটগুলি পরিবর্তন না করা হলে এখনও কার্যকর করা হয় না। সুতরাং আমাদের এখনও একটি রাষ্ট্রীয় পাইপ প্রয়োজন।

@ এরিকমার্টিনিজ প্রস্তাবিত সমাধানটি হ'ল: onPushপরিবর্তন সনাক্তকরণ সহ রাষ্ট্রীয় পাইপ । এই সমাধানের জন্য @ ক্যাফিনেটমোনকি'র উত্তর দেখুন।

নোট করুন যে এই সমাধানের সাথে transform()পদ্ধতিটিতে প্রতিবার একই অ্যারে ফেরত দেওয়ার দরকার হয় না। আমি দেখতে পাই যে কিছুটা অদ্ভুত: একটি রাজ্যহীন পাইপ state এটি সম্পর্কে আরও কিছু ভেবে ... রাষ্ট্রীয় পাইপ সম্ভবত সর্বদা একই অ্যারে ফিরে আসবে। অন্যথায় এটি onPushডেভ মোডের উপাদানগুলির সাথেই ব্যবহার করা যেতে পারে ।

---

সুতরাং এতকিছুর পরেও, আমি মনে করি আমি @ এরিক এবং @ পিক্সেলবিটের উত্তরগুলির সংমিশ্রণটি পছন্দ করি: স্টেটফুল পাইপ যা onPushউপাদানটি অনুমতি দেয় তবে পরিবর্তন সনাক্তকরণ সহ একই অ্যারে রেফারেন্সটি ফিরিয়ে দেয়। যেহেতু রাষ্ট্রীয় পাইপ একই অ্যারে রেফারেন্স দেয়, পাইপটি এখনও সেই উপাদানগুলির সাথে ব্যবহার করা যেতে পারে যা কনফিগার করা হয়নি onPush।

Plunker

এটি সম্ভবত একটি কৌনিক 2 আইডিয়াম হয়ে উঠবে: যদি কোনও অ্যারে কোনও পাইপ খাওয়াত, এবং অ্যারে পরিবর্তন হতে পারে (অ্যারেতে থাকা আইটেমগুলি, অ্যারের উল্লেখ নয়), আমাদের স্টেটফুল পাইপ ব্যবহার করা দরকার।

Comments

সমস্যার বিস্তারিত ব্যাখ্যা দেওয়ার জন্য আপনাকে ধন্যবাদ। এটি অদ্ভুত হলেও যে অ্যারেগুলির পরিবর্তন সনাক্তকরণ সাম্যতার তুলনার পরিবর্তে পরিচয় হিসাবে প্রয়োগ করা হয়েছে। এটি পর্যবেক্ষণযোগ্য দ্বারা সমাধান করা সম্ভব হবে?

— মার্টিন নওক

@ মার্টিননওওয়াক, আপনি যদি জিজ্ঞাসা করছেন যে অ্যারেগুলি পর্যবেক্ষণযোগ্য কিনা এবং পাইপটি রাষ্ট্রহীন ছিল ... আমি জানি না, আমি এটি চেষ্টা করে দেখিনি।

— রাজকোক

অন্য সমাধানটি খাঁটি পাইপ হবে যেখানে আউটপুট অ্যারে ইভেন্ট শ্রোতাদের সাথে ইনপুট অ্যারেতে পরিবর্তনগুলি ট্র্যাক করছে।

— টুপুর্টুনট

আমি কেবল আপনার প্লঙ্কারকেই কাঁটাচামচ করেছি, এবং এটি আমার জন্য onPushপরিবর্তন ছাড়াই কাজ করেছে plnkr.co/edit/gRl0Pt9oBO6038kCXZPk?p= পূর্বরূপ

— ড্যান

Answer 2

হিসাবে এরিক মার্টিনেজ মন্তব্য নির্দিষ্ট যোগ pure: falseআপনার টু Pipeপ্রসাধক এবং changeDetection: ChangeDetectionStrategy.OnPushআপনার টু Componentপ্রসাধক আপনার সমস্যাটি ঠিক করবে। এখানে একটি কর্মজীবী ​​plunkr। পরিবর্তন ChangeDetectionStrategy.Alwaysকরাও কাজ করে। কারণটা এখানে.

পাইপগুলিতে কৌনিক 2 গাইড অনুসারে :

পাইপগুলি ডিফল্টরূপে রাজ্যহীন। আমরা একটি নল ঘোষণা সেটিং দ্বারা stateful করা আবশ্যক pureসম্পত্তির @Pipeকরার প্রসাধক false। এই সেটিংটি প্রতিটি চক্রের এই পাইপের আউটপুট পরীক্ষা করতে Angular এর পরিবর্তন সনাক্তকরণ সিস্টেমকে বলে, এটির ইনপুট পরিবর্তন হয়েছে কি না।

হিসাবে ChangeDetectionStrategy, ডিফল্টরূপে, সমস্ত বাইন্ডিং প্রতি একক চক্র পরীক্ষিত হয়। যখন একটি pure: falseনল যোগ করা হয়, আমি বিশ্বাস করি পরিবর্তন সনাক্তকরণ পদ্ধতি থেকে পরিবর্তিত CheckAlwaysকরা CheckOnceকর্মক্ষমতা কারণে। এর সাথে OnPush, কম্পোনেন্টের সাথে বাইন্ডিংগুলি কেবল তখনই ইনপুট প্রপার্টি পরিবর্তিত হয় বা কোনও ইভেন্ট ট্রিগার করা হয়। পরিবর্তন ডিটেক্টর সম্পর্কে আরও তথ্যের জন্য, এর একটি গুরুত্বপূর্ণ অংশ angular2, নিম্নলিখিত লিঙ্কগুলি পরীক্ষা করে দেখুন:

• কৌনিক 2 এ সনাক্তকরণ পরিবর্তন করুন
• https://github.com/angular/angular/issues/4746
• পরিবর্তন সনাক্তকরণ পুনরায় উদ্ভাবিত ভিক্টর সাবকিন

Comments

"যখন একটি pure: falseপাইপ যুক্ত করা হয়, তখন আমি বিশ্বাস করি যে পরিবর্তন সনাক্তকরণের পদ্ধতিটি চেকএলওয়ে থেকে চেকঅনস-এ পরিবর্তিত হয়" - যা আপনি ডক্স থেকে উদ্ধৃত করেছেন তার সাথে একমত নয়। আমার বোঝাটি নিম্নরূপ: একটি স্টেটলেস পাইপের ইনপুটগুলি প্রতিটি চক্রকে ডিফল্টরূপে পরীক্ষা করা হয়। যদি কোনও পরিবর্তন হয়, পাইপটির transform()পদ্ধতিটিকে আউটপুট উত্পন্ন করতে পুনরায় (পুনরায়) বলা হয়। একটি রাষ্ট্রীয় পাইপের transform()পদ্ধতিটিকে প্রতিটি চক্র বলা হয় এবং এর আউটপুট পরিবর্তনের জন্য পরীক্ষা করা হয়। এছাড়াও stackoverflow.com/a/34477111/215945 দেখুন ।

— রাজকোক

@ মারকরাজাকক, ওফস, আপনি ঠিক বলেছেন, তবে যদি তা হয় তবে পরিবর্তন সনাক্তকরণ কৌশলটি কেন কাজ করে?

— 0xcaff

দুর্দান্ত প্রশ্ন। দেখে মনে হবে যে পরিবর্তনের সনাক্তকরণ কৌশলটি যখন পরিবর্তিত হয়েছে OnPush(যেমন উপাদানটিকে "অপরিবর্তনীয়" হিসাবে চিহ্নিত করা হয়), রাষ্ট্রীয় পাইপের আউটপুটটি "স্থিতিশীল" করতে হয় না - অর্থাৎ, মনে হয় যে transform()পদ্ধতিটি কেবল একবার চালানো হয়েছে (সম্ভবত সমস্ত উপাদানটির পরিবর্তন সনাক্তকরণ কেবল একবার চালানো হবে)। @ পিক্সেলবিটের উত্তরের সাথে এর বিপরীতে, যেখানে transform()পদ্ধতিটিকে একাধিকবার বলা হয় এবং এটি স্থিতিশীল করতে হয় (পিক্সেলবিটের অন্যান্য উত্তর অনুসারে ), সুতরাং একই অ্যারে রেফারেন্সটি ব্যবহার করা দরকার।

— রাজকক

@ মারকরাজাকক যদি আপনি যা বলছেন তা সঠিক, দক্ষতার দিক থেকে, এই বিশেষ ব্যবহারের ক্ষেত্রে সম্ভবত এটিই আরও ভাল উপায় কারণ transformকেবল তখনই ডাকা হয় যখন আউটপুট স্থিতিশীল না হওয়া পর্যন্ত একাধিকবার পরিবর্তে নতুন ডেটা ধাক্কা দেওয়া হয়, তাই না?

— 0xcaff

সম্ভবত, আমার দীর্ঘায়িত উত্তর দেখুন। আমি আশা করি কৌণিক ২ এ পরিবর্তন সনাক্তকরণ সম্পর্কে আরও নথিপত্র থাকতে পারে

— মার্ক রাজকক

Answer 3

ডেমো প্লঙ্কার

আপনার চেঞ্জডেস্টেকশনস্ট্রেজি পরিবর্তন করার দরকার নেই। একটি রাষ্ট্রীয় পাইপ প্রয়োগ করা সমস্ত কিছু কাজ করার জন্য যথেষ্ট।

এটি একটি রাষ্ট্রীয় পাইপ (অন্য কোনও পরিবর্তন করা হয়নি):

@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;
  }
}

Comments

OnPush এ পরিবর্তনটি পরিবর্তন না করেই আমি এই ত্রুটিটি পেয়েছি: [ plnkr.co/edit/j1VUdgJxYr6yx8WgzCId?p= পূর্বরূপ :( প্লানক্র) Expression 'students | sortByName:queryElem.value in HelloWorld@7:6' has changed after it was checked. Previous value: '[object Object],[object Object],[object Object]'. Current value: '[object Object],[object Object],[object Object]' in [students | sortByName:queryElem.value in HelloWorld@7:6]

— চু পুত্র

আপনি উদাহরণস্বরূপ করতে পারেন কেন আপনার সোর্টবাইনেমেপাইপে স্থানীয় ভেরিয়েবলের মানগুলি সংরক্ষণ করতে হবে এবং তারপরে এটি রূপান্তর ফাংশন @ পিক্সেলবাইটগুলিতে ফিরিয়ে দিতে হবে? আমি এটিও লক্ষ্য করেছি যে কৌণিক চক্রটি পরিবর্তনের সাথে দুটি বার পরিবর্তনের ফাংশন দিয়ে যায় teঅনপশ এবং এটি ছাড়া 4 বার

— Chu Son

@ চুসন, আপনি সম্ভবত আগের সংস্করণ থেকে লগগুলি খুঁজছেন। মানগুলির একটি অ্যারে ফিরিয়ে দেওয়ার পরিবর্তে আমরা মানগুলির একটি অ্যারের রেফারেন্স ফিরিয়ে দিচ্ছি, যা সনাক্ত করা পরিবর্তন হতে পারে, আমি বিশ্বাস করি। পিক্সেলবিটস, আপনার উত্তরটি আরও অর্থবোধ করে।

— 0xcaff

অন্যান্য পাঠকদের উপকারের জন্য, মন্তব্যগুলিতে উপরে উল্লিখিত ত্রুটি চুশনের বিষয়ে, এবং স্থানীয় ভেরিয়েবলটি ব্যবহারের প্রয়োজনীয়তার বিষয়ে, আরেকটি প্রশ্ন তৈরি হয়েছিল এবং এর উত্তর পিক্সেলবাইট দিয়েছিল।

— মার্ক রাজকোক

Answer 4

থেকে কৌণিক ডকুমেন্টেশন

খাঁটি এবং অপরিষ্কার পাইপ

পাইপ দুটি বিভাগ আছে: খাঁটি এবং অপরিষ্কার। পাইপগুলি ডিফল্টরূপে খাঁটি। আপনি এখন পর্যন্ত প্রতিটি পাইপ খাঁটি হয়ে দেখেছেন been আপনি কোনও পাইপকে শুদ্ধ পতাকাটি মিথ্যাতে সেট করে অশুচি করেন। আপনি এইভাবে ফ্লাইংহিরো পাইপকে অপবিত্র করতে পারেন:

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

এটি করার আগে খাঁটি এবং অপরিষ্কার মধ্যে পার্থক্যটি বুঝতে হবে, খাঁটি পাইপ দিয়ে শুরু করুন।

খাঁটি পাইপ কৌণিক কেবল তখনই খাঁটি পাইপ কার্যকর করে যখন এটি ইনপুট মানটিতে একটি খাঁটি পরিবর্তন সনাক্ত করে। খাঁটি পরিবর্তন হ'ল হয় আদিম ইনপুট মান (স্ট্রিং, সংখ্যা, বুলিয়ান, প্রতীক) বা পরিবর্তিত অবজেক্ট রেফারেন্স (তারিখ, অ্যারে, ফাংশন, অবজেক্ট)।

কৌণিক (সম্মিলিত) বস্তুর মধ্যে পরিবর্তনগুলি উপেক্ষা করে। আপনি যদি কোনও ইনপুট মাস পরিবর্তন করেন, ইনপুট অ্যারে যুক্ত করেন বা কোনও ইনপুট অবজেক্ট সম্পত্তি আপডেট করেন তবে এটি খাঁটি পাইপকে কল করবে না।

এটি সীমাবদ্ধ মনে হতে পারে তবে এটি দ্রুতও। একটি অবজেক্ট রেফারেন্স চেক দ্রুত differences পার্থক্যের জন্য গভীর চেকের চেয়ে অনেক দ্রুত Ang সুতরাং কৌনিকটি দ্রুত নির্ধারণ করতে পারে যে এটি পাইপ সম্পাদন এবং একটি দৃশ্য আপডেট উভয়ই এড়িয়ে যেতে পারে কিনা।

এই কারণে, যখন আপনি পরিবর্তন সনাক্তকরণ কৌশলটি নিয়ে বেঁচে থাকতে পারেন তবে খাঁটি পাইপ পছন্দনীয়। আপনি যখন না পারেন, আপনি অপরিষ্কার পাইপ ব্যবহার করতে পারেন।

Comments

উত্তরটি সঠিক, তবে পোস্ট করার সময় আরও বেশি চেষ্টা করা ভাল লাগবে

— স্টেফান

Answer 5

শুদ্ধ করার পরিবর্তে: মিথ্যা। আপনি উপাদানটির গভীর কপি এবং প্রতিস্থাপন করতে পারেন এটি দ্বারা স্টুডেন্টস = অবজেক্ট.স্যাসাইন ([], NEW_ARRAY); যেখানে NEW_ARRAY হ'ল পরিবর্তিত অ্যারে।

এটি কৌণিক 6 এর জন্য কাজ করে এবং অন্যান্য কৌণিক সংস্করণের জন্যও কাজ করা উচিত।

Answer 6

একটি কার্যকারণ: এই পাইপটি ব্যবহার করে ম্যানুয়ালি পাইপ আমদানি করুন trans

constructor(
private searchFilter : TableFilterPipe) { }

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

আসলে আপনার পাইপেরও দরকার নেই

Answer 7

পাইপ অতিরিক্ত প্যারামিটার যোগ করুন, এবং অ্যারে পরিবর্তনের পরে ঠিক এটি পরিবর্তন করুন, এমনকি খাঁটি পাইপের সাহায্যে তালিকাটি রিফ্রেশ হবে

আইটেম আইটেম দিন নল: PARAM

Answer 8

এই ব্যবহারের ক্ষেত্রে আমি ডেটা ফিল্টারিংয়ের জন্য টিএসএস ফাইলটিতে আমার পাইপ ব্যবহার করেছি। খাঁটি পাইপ ব্যবহার না করে পারফরম্যান্সের জন্য এটি অনেক ভাল। Ts তে এটি ব্যবহার করুন:

import { YourPipeComponentName } from 'YourPipeComponentPath';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

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

Answer 9

অপরিষ্কার পাইপগুলি কার্য সম্পাদনে ব্যয়বহুল। সুতরাং অপরিষ্কার পাইপগুলি তৈরি করবেন না, ডেটা পরিবর্তন করার সময় ডেটা অনুলিপি তৈরি করে ডেটা ভেরিয়েবলের রেফারেন্সটি পরিবর্তন করুন এবং মূল ডেটা ভেরিয়েবলের অনুলিপিটির অনুলিপি পুনরায় সাইন করুন।

            emp=[];
            empid:number;
            name:string;
            city:string;
            salary:number;
            gender:string;
            dob:string;
            experience:number;

            add(){
              const temp=[...this.emps];
              const e={empid:this.empid,name:this.name,gender:this.gender,city:this.city,salary:this.salary,dob:this.dob,experience:this.experience};
              temp.push(e); 
              this.emps =temp;
              //this.reset();
            }