এক্সপ্রেশনচেনজডএফটারআইটি হাসবিন চেকডএরআর ব্যাখ্যা করা হয়েছে

Question

আমি কেন এই ত্রুটিটি পেতে চলেছি তা দয়া করে আমাকে ব্যাখ্যা করুন: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

স্পষ্টতই, আমি এটি কেবল ডেভ মোডে পেয়েছি, এটি আমার প্রোডাকশন বিল্ডে ঘটে না, তবে এটি খুব বিরক্তিকর এবং আমি কেবল আমার দেব পরিবেশে কোনও ত্রুটি থাকার উপকারিতা বুঝতে পারি না যা প্রোডে প্রদর্শিত হবে না - -আমার বোধগম্যতার কারণেই সম্ভবত।

সাধারণত, ফিক্সটি যথেষ্ট সহজ, আমি কেবল একটি সেট টাইমআউটে এই জাতীয় ত্রুটি সৃষ্টিকারী কোডটি लपेटি:

setTimeout(()=> {
    this.isLoading = true;
}, 0);

বা এইরকম কোনও কনস্ট্রাক্টরের সাহায্যে পরিবর্তনগুলি সনাক্ত করতে বাধ্য করুন constructor(private cd: ChangeDetectorRef) {}:

this.isLoading = true;
this.cd.detectChanges();

তবে কেন আমি ক্রমাগত এই ত্রুটি চালাচ্ছি? আমি এটি বুঝতে চাই যাতে ভবিষ্যতে আমি এই হ্যাকিংয়ের সমাধানগুলি এড়াতে পারি।

Comments

এক্সপ্রেশন

— চ্যাঞ্জডএফটারআইটিহাসবিন চেকডএরর

Answer 1

আমারও একি দশা. এ খুঁজছি জীবনচক্র আঙ্গুলসমূহ ডকুমেন্টেশন , আমি পরিবর্তিত ngAfterViewInitকরতে ngAfterContentInitএবং এটা কাজ করে।

Comments

@ ফিলিপইঙ্ক আমার সমস্যাটি ডিওএম পরিবর্তনের মাধ্যমে ট্রিগার হওয়া পরিবর্তনের সাথে সম্পর্কিত ছিল। যখন ডোম পরিবর্তন হবে, ক্যোরিলিস্ট অবজেক্টটি (এটি একটি @ কনটেন্টচিল্ডেন সম্পত্তি থেকে এসেছে) আপডেট হবে এবং আপডেট বলে যে পদ্ধতিতে দ্বি-দ্বি সীমার সম্পত্তি পরিবর্তন হয়েছিল inside এটি আমার ছিল এমন সমস্যা তৈরি করেছিল। setTimeoutউপরের মতো আপনার যে মত দেখানো হয়েছে তার সাথে দ্বি-সম্পত্তিতে এই পরিবর্তনটি মুড়িয়ে দেওয়া কৌশলটি করেছে। ধন্যবাদ!

— kbpontius

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

— বিভু

ngAfterContentCheckedngAfterContentInitতবুও ত্রুটি ছুড়ে দেওয়ার সময় এখানে কাজ করে ।

— আশুবুন্টু

এনজিএফটার কনটেন্ট চেকড ব্যবহার কিন্তু প্রকল্পটি খুব ধীরগতিতে লোড হয়েছে

— ঘোোটেকর রাহুল

Answer 2

এই ত্রুটিটি আপনার অ্যাপ্লিকেশনটিতে একটি আসল সমস্যা নির্দেশ করে, তাই এটি ব্যতিক্রম ছুঁড়ে ফেলা বোধগম্য।

ইন devModeপরিবর্তন সনাক্তকরণ যদি মডেল পরিবর্তন করা হয়েছে চেক করতে যে নিয়মিত পরিবর্তন সনাক্তকরণ চালনার পরে একটি অতিরিক্ত পালা যোগ করা হয়েছে।

যদি মডেলটি নিয়মিত এবং অতিরিক্ত পরিবর্তন সনাক্তকরণের মোড়ের মধ্যে পরিবর্তিত হয় তবে এটি ইঙ্গিত দেয় যে কোনওটিই

• পরিবর্তন সনাক্তকরণ নিজেই একটি পরিবর্তন ঘটায়
• একটি পদ্ধতি বা প্রাপ্ত ব্যক্তি যতবার ডাকে ততবার আলাদা মান দেয়

যা উভয়ই খারাপ, কারণ কীভাবে এগিয়ে চলবেন তা স্পষ্ট নয় কারণ মডেলটি কখনও স্থিতিশীল হতে পারে না।

যদি মডেলটি স্থিতিশীল না হওয়া পর্যন্ত অ্যাংুলার পরিবর্তন সনাক্তকরণ চালায় তবে এটি চিরতরে চলতে পারে। যদি কৌণিক পরিবর্তন সনাক্তকরণ চালায় না, তবে দৃশ্যটি মডেলের বর্তমান অবস্থাকে প্রতিফলিত করতে পারে না।

আরও দেখুন অ্যাংুলার 2-এ উত্পাদন এবং বিকাশের মোডের মধ্যে পার্থক্য কী?

Comments

ভবিষ্যতে এই ত্রুটিটি দেখে আমি কীভাবে এড়াতে পারি? আমি একই ভুলগুলি না করি তা নিশ্চিত করার জন্য আমার কোড সম্পর্কে আমার চিন্তাভাবনা করার কী আলাদা উপায় আছে?

— কেভিন লেস্টার্জ

সাধারণত এটি কিছু লাইফসাইকেল কলব্যাকগুলির মতো ngOnInitবা ngOnChangesমডেলটি সংশোধন করার কারণে ঘটে থাকে (কিছু লাইফাইসাইকাল কলব্যাকগুলি অন্যদের মডেলকে সংশোধন করার অনুমতি দেয় না, আমি নিজেই কোনটি করি বা করি না তা আমার মনে নেই)। পদ্ধতিতে বা দৃশ্যের সাথে দৃশ্যের সাথে আবদ্ধ না হয়ে ক্ষেত্রের সাথে আবদ্ধ হন এবং ইভেন্ট হ্যান্ডলারে ক্ষেত্রগুলি আপডেট করুন। যদি আপনাকে অবশ্যই পদ্ধতিগুলিতে আবদ্ধ থাকতে হয় তবে নিশ্চিত হন যে যতক্ষণ না বাস্তবে কোনও পরিবর্তন হয়নি they পরিবর্তন সনাক্তকরণ এই পদ্ধতিগুলিকে অনেক কল করবে।

— গন্টার জ্যাচবাউয়ার

এনজিএক্স-টোস্টার লাইব্রেরি ব্যবহার করে যে কেউ এই ত্রুটিটি পেয়েছে এখানে পৌঁছানোর জন্য, এখানে বাগ রিপোর্টটি রয়েছে: github.com/scttcper/ngx-toastr/issues/160

— rmcsharry

এটি অ্যাপ্লিকেশনটিতে কোনও সমস্যা নয়। কলিংটি changeRef.detectChanges()একটি সমাধান / ত্রুটিটিকে দমন করে তোলে এটাই তার প্রমাণ। এটি $scope.$watch()কৌনিক 1 এর অভ্যন্তরে রাষ্ট্র পরিবর্তন করার মতো

— কেভিন বিল

আমি কৌনিক 1 খুব ভাল জানি না তবে কৌণিক 2 এ সনাক্তকরণটি পরিবর্তন করে ভিন্নভাবে কাজ করে। আপনার ঠিক আছে যে এটি অগত্যা কোনও সমস্যা নয়, তবে সাধারণত cdRef.detectChanges()কিছু অদ্ভুত প্রান্তে কেবল প্রয়োজন হয় এবং যখন প্রয়োজন হয় তখন আপনার যত্ন সহকারে দেখা উচিত যখন আপনি সঠিকভাবে বুঝতে পারেন।

— গন্টার জ্যাচবাউর 19

Answer 3

একবার আমি কৌণিক জীবনচক্র হুকস এবং পরিবর্তন সনাক্তকরণের সাথে তাদের সম্পর্ক বুঝতে পেরে অনেক সময় বোঝাপড়া শুরু হয়েছিল ।

আমি কৌনিকটি *ngIfএকটি উপাদানটির সাথে আবদ্ধ একটি বৈশ্বিক পতাকা আপডেট করার চেষ্টা করছিলাম এবং আমি অন্য একটি উপাদানটির ngOnInit()জীবনচক্রের হুকের অভ্যন্তরে সেই পতাকাটি পরিবর্তন করার চেষ্টা করছিলাম ।

ডকুমেন্টেশন অনুসারে, কৌনিকটি ইতিমধ্যে পরিবর্তনগুলি সনাক্ত করার পরে এই পদ্ধতিটি বলা হয়:

প্রথম এনজিওনচেনজ () এর পরে একবার ফোন করা হয়েছে।

সুতরাং এর ভিতরে পতাকাটি আপডেট করা ngOnChanges()পরিবর্তন সনাক্তকরণ শুরু করবে না। তারপরে, একবার পরিবর্তন সনাক্তকরণ স্বাভাবিকভাবেই আবার ট্রিগার শুরু করে, পতাকাটির মান পরিবর্তন হয়ে যায় এবং ত্রুটি নিক্ষেপ করা হয়।

আমার ক্ষেত্রে, আমি এটি পরিবর্তন করেছি:

constructor(private globalEventsService: GlobalEventsService) {

}

ngOnInit() {
    this.globalEventsService.showCheckoutHeader = true;
}

এটি:

constructor(private globalEventsService: GlobalEventsService) {
    this.globalEventsService.showCheckoutHeader = true;
}

ngOnInit() {

}

এবং এটি সমস্যার সমাধান করেছে :)

Comments

আমার সমস্যাও একই রকম ছিল। যে আমি দীর্ঘ ঘন্টা পরে একটি ভুল করেছি, এবং ngOnInit ফাংশন এবং কনস্ট্রাক্টরের বাইরে একটি ভেরিয়েবল সংজ্ঞায়িত। এটি পর্যবেক্ষণযোগ্য থেকে ডেটা পরিবর্তনগুলি গ্রহণ করে, যা ইনিটালাইজেশন ফাংশনে রাখা হয়। ত্রুটিটি ঠিক করার জন্য আপনার মতো একই কাজ করেছিলেন।

— ravo10

চারপাশে খুব অনুরূপ, তবে আমি router.navigateইউআরএল উপস্থিত থাকলে একটি টুকরা লোড করার পরে ( ) স্ক্রোল করার চেষ্টা করছিলাম । এই কোডটি প্রাথমিকভাবে AfterViewInitযেখানে আমি ত্রুটিটি গ্রহণ করছিলাম সেখানে স্থাপন করা হয়েছিল, তারপরে আপনি কনস্ট্রাক্টরকে যেমন বলেছিলেন তেমন সরানো হয়েছিল তবে এটি খণ্ডটিকে সম্মান দিচ্ছে না। সমাধানে সরানো ngOnInit:) ধন্যবাদ!

— জোয়েল বাল্মার

যদি আমার এইচটিএমএল ক্লকভ্যালু () - ডেটটাইম.টাইমএএমপিএম (নতুন তারিখ ()) এর মাধ্যমে "এইচএইচ: এমএম" হিসাবে ফিরে আসার সময়কে আবদ্ধ করা হয় eventually এটি শেষ পর্যন্ত ট্রিপ হবে যখন সনাক্তকরণ চলাকালীন সময়ে পরিবর্তন হবে, আমি কীভাবে পারি? এটা ঠিক কর?

— ম্যারিয়ান

একই অবস্থা. এছাড়াও খুঁজে পাওয়া যায় যে setInterval()অন্যান্য জীবনকালের ইভেন্ট কোডের পরেও যদি এটির প্রয়োজন হয় তবে কাজ করে তবে মোড়ানো ।

— রিক স্ট্রহল

Answer 4

হালনাগাদ

আমি প্রথমে ওপির স্ব-প্রতিক্রিয়া দিয়ে শুরু করার পরামর্শ দিচ্ছি : constructorবনাম কী করা উচিত তা সম্পর্কে সঠিকভাবে চিন্তা করুন ngOnChanges()।

মূল

এটি উত্তরের চেয়ে পার্শ্ব নোট, তবে এটি কারওর পক্ষে সহায়তা করতে পারে। বোতামের উপস্থিতিটি ফর্মের অবস্থার উপর নির্ভরশীল করার চেষ্টা করার সময় আমি এই সমস্যায় হোঁচট খেয়েছি:

<button *ngIf="form.pristine">Yo</button>

যতদূর আমি জানি, এই সিনট্যাক্সটি শর্তের ভিত্তিতে বোতামটি ডিওএম থেকে যুক্ত এবং সরানো হচ্ছে। যা ঘুরে দাঁড়ায় ExpressionChangedAfterItHasBeenCheckedError।

আমার ক্ষেত্রে ঠিক করা (যদিও আমি পার্থক্যের পুরো বোঝার বিষয়টি উপলব্ধি করার দাবি করি না), display: noneপরিবর্তে এটি ব্যবহার করা হয়েছিল:

<button [style.display]="form.pristine ? 'inline' : 'none'">Yo</button>

Comments

শৈলীর এনজিআইফ বনাম শৈলীর মধ্যে পার্থক্য সম্পর্কে আমার ধারণাটি হ'ল এনজিআইফ শর্তটি সত্য না হওয়া পর্যন্ত পৃষ্ঠায় এইচটিএমএল অন্তর্ভুক্ত করে না, এভাবে "পৃষ্ঠার ওজন" সামান্য বিটকে হ্রাস করে যখন শৈলীর কৌশলটি সবসময় এইচটিএমএলকে কারণী করে তোলে পৃষ্ঠায় এবং লুকানো বা ফর্ম.প্রিন্টিন মানের উপর ভিত্তি করে প্রদর্শিত হয়।

— user3785010

[hidden]খুব ভার্বোস [style.display]অংশের পরিবর্তে আপনি সম্ভবত ব্যবহার করতে পারেন । :)

— ফিলিপ মেসনার

কেন না. যদিও, যেমন এই পৃষ্ঠাতে অন্য মন্তব্যে @Simon_Weaver দ্বারা উল্লেখ করা হয়েছে, [hidden] সবসময় একই আচরণ থাকবে না যেমনdisplay: none

— Arnaud পি

আমি প্রতিটি বোতামে * এনজিআইফ দিয়ে দুটি পৃথক বোতাম (লগআউট / লগইন) দেখছিলাম এবং এটি সমস্যার কারণ হচ্ছিল।

— GoTo

কনস্ট্রাক্টর আমার জন্য সঠিক জায়গা ছিল, একটি উপাদান স্ন্যাক-বার চালু করছিলেন

— অস্টিন

Answer 5

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

আমি DOM এর অংশ না হয়েও [hidden]সুবিধা নিতে *ngIfচাইনি তাই আমি নিম্নলিখিত সমাধানটি পেয়েছি যা এটির জন্য সংশোধন করার পরিবর্তে ত্রুটিটি দমন করে তবে এটি সবার পক্ষে সেরা নাও হতে পারে তবে আমার ক্ষেত্রে যেখানে আমি জানি চূড়ান্ত ফলাফলটি সঠিক, এটি আমার অ্যাপ্লিকেশনটির জন্য ঠিক আছে।

আমি যা করেছি তা বাস্তবায়ন করা হয়েছিল AfterViewChecked, যুক্ত করুন constructor(private changeDetector : ChangeDetectorRef ) {}এবং তারপরে

ngAfterViewChecked(){
  this.changeDetector.detectChanges();
}

আমি আশা করি এটি অন্যান্যরা যেমন আমাকে সহায়তা করেছে তেমন অন্যান্যদেরও সহায়তা করে।

Comments

এটি কি অসীম পরিবর্তন সনাক্তকরণ লুপকে ট্রিগার করবে না? মানে, আপনি চেক করার পরে আপনি পরিবর্তনগুলি সনাক্ত করছেন।

— ম্যানুয়েল আজর

@ ম্যানুয়েলআজার স্পষ্টতই তা তা করে না। এটি আমার জন্য কাজ করা একমাত্র সমাধান। আমার কনসোলে সর্বশেষে কিছুটা নীরবতা। আমি এই সমস্ত অপ্রাসঙ্গিক পরিবর্তন সনাক্তকরণ "ত্রুটি" দেখে খুব ক্লান্ত হয়ে পড়েছিলাম।

— জেরেমি থিল

Answer 6

কৌণিক পরিবর্তন সনাক্তকরণ চালায় এবং যখন এটি জানতে পারে যে কিছু উপাদান যা সন্তানের উপাদানগুলিতে প্রেরণ করা হয়েছিল তা পরিবর্তন করা হয়েছে কৌণিক ত্রুটিটি ছুড়ে ফেলে:

ExpressionChangedAfterItHasBeenCheckedError আরও জন্য ক্লিক করুন

এটি সংশোধন করার জন্য আমরা AfterContentCheckedজীবনচক্র হুক এবং ব্যবহার করতে পারি

import { ChangeDetectorRef, AfterContentChecked} from '@angular/core';

  constructor(
  private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

Comments

যদিও এটি সমস্যার সমাধান করতে পারে, এটি কি খুব বেশি বিস্তৃত নয় এবং অতিরিক্ত সিডিকে ছাড়িয়ে যায়?

— নিকি

আমি মনে করি এটিই কেবলমাত্র একটি উত্তর যা এই ত্রুটিটিকে সম্বোধন করে কোনও সন্তানের কাছে মান (গুলি) দেওয়ার কারণে ঘটে। ধন্যবাদ!

— java-addict301

@ নিকি হ্যাঁ প্রতিবার আপনি স্ক্রিনে, যে কোনও জায়গায় স্পর্শ করুন, এনজিএফটারকন্টেন্টচেকড () বলা হয়

— Mert Mertce

আমার পক্ষে কাজ করেছে!

— ক্রিস্টাল

এটি আমার পক্ষে কাজ করেছে। ভাগ করার জন্য আপনাকে ধন্যবাদ!

— ওমস্টান

Answer 7

আমার ক্ষেত্রে, আমার পরীক্ষা চালানোর সময় আমার স্পেক ফাইলটিতে আমার এই সমস্যাটি ছিল had

আমাকে পরিবর্তন ngIf করতে হয়েছিল [hidden]

<app-loading *ngIf="isLoading"></app-loading>

প্রতি

<app-loading [hidden]="!isLoading"></app-loading>

Comments

সম্পর্কে [hidden]: টকিংডটনেট

— ডট

এখানে পার্থক্যটি হ'ল *ngIfডিওএম পরিবর্তন করে, পৃষ্ঠাটি থেকে উপাদানটি যুক্ত করে মুছে ফেলা হয় [hidden]এবং আইটেমটির দৃশ্যমানতা পরিবর্তন করে যখন এটি ডিওএম থেকে অপসারণ না করে।

— গ্রুনডোন্ডোলা

কিন্তু, এটি কি আসল সমস্যাটি সত্যিই ঠিক করে নি ...?

— ravo10

Answer 8

নীচের পদক্ষেপগুলি অনুসরণ করুন:

১. 'কৌনিক / কোর থেকে নিম্নরূপে আমদানি করে' চেঞ্জডেক্টরআরফ 'ব্যবহার করুন:

import{ ChangeDetectorRef } from '@angular/core';

2. এটি নির্মাণকারী () এ নিম্নলিখিত হিসাবে প্রয়োগ করুন:

constructor(   private cdRef : ChangeDetectorRef  ) {}

৩. আপনার কার্যক্রমে নিম্নলিখিত পদ্ধতিটি যুক্ত করুন যা আপনি ক্লিক করুন বোতামের মতো ইভেন্টে কল করছেন। সুতরাং এটি দেখতে দেখতে:

functionName() {   
    yourCode;  
    //add this line to get rid of the error  
    this.cdRef.detectChanges();     
}

Answer 9

আমি এনজি 2-ক্যারোসেলামোস ব্যবহার করছিলাম (কৌনিক 8 এবং বুটস্ট্র্যাপ 4)

নীচে আমার সমস্যার সমাধান:

আমি কি করেছিলাম:

1. implement AfterViewChecked,  
2. add constructor(private changeDetector : ChangeDetectorRef ) {} and then 
3. ngAfterViewChecked(){ this.changeDetector.detectChanges(); }

Comments

এটা সাহায্য করেছিল. অ্যামেজিং !!

— পথিক ভেজানি

আপনি আমার দিন বাঁচিয়েছেন ... ধন্যবাদ!

— সর্বমোট

Answer 10

আমার উপাদানগুলির একটি অ্যারেতে মান পরিবর্তন হওয়ায় আমিও একই সমস্যার মুখোমুখি হয়েছি। তবে মান পরিবর্তনের পরিবর্তনগুলি সনাক্ত করার পরিবর্তে আমি উপাদান পরিবর্তন শনাক্তকরণ কৌশলটি পরিবর্তিত করেছি onPush(যা বস্তুর পরিবর্তনে পরিবর্তনগুলি সনাক্ত করবে এবং মান পরিবর্তনের পরিবর্তে নয়)।

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush
    selector: -
    ......
})

Comments

এটি নিয়ন্ত্রণ থেকে গতিশীলভাবে যুক্ত / সরানোর জন্য কাজ করেছে বলে মনে হচ্ছে .. কোনও ত্রুটি আছে কি?

— রিকার্ডো সারাকিনো

আমার হাতের যে পরিস্থিতি আছে তাতে মনোমুগ্ধকর কাজ করে, ধন্যবাদ! একটি উপাদান একটি "গ্লোবাল" অবজেক্টের সাথে আবদ্ধ ছিল যা অন্য কোথাও পরিবর্তিত হয়েছিল এবং ত্রুটি ঘটায়। যখন আবদ্ধ বস্তুটি আপডেট করা হয়েছিল তখন এই উপাদানটির ইতিমধ্যে একটি আপডেট হ্যান্ডলার ছিল, এই ইভেন্ট হ্যান্ডলারটি এখন ChangeDetectorRef.detectChanges () কে চেঞ্জডিজট্রস্ট্রেস্টির সাথে সম্মিলিতভাবে কল করে nঅনপশ ত্রুটি ছাড়াই পছন্দসই হিসাবে কাজ করে।

— বার্নোল্লি আইটি

@ রিকার্ডোসারাসিনো আপনি কি কোনও ত্রুটি খুঁজে পেয়েছেন? আমিও একই জিনিস ভাবছিলাম। অনপশ কীভাবে পরিবর্তন সনাক্তকরণ কাজ করে তা আমি জানি, তবে ভাবছি এমন কোনও গোটচা রয়েছে যা সম্ভবত আমি মিস করছি। আমি ফিরে বৃত্ত করতে চান না।

— এমটিপল্টজ

@ রিকার্ডোসারাসিনো, হ্যাঁ এর কিছু অসুবিধা রয়েছে, আপনি এই বিস্তারিত লিঙ্কটি ব্লগ.আঙ্গুলার

— ধীরাজ

@ বার্নল্লিট ধন্যবাদ, আমি আনন্দিত যে এটি আপনার পক্ষে কাজ করেছে।

— ধীররাজ

Answer 11

নিবন্ধটি উল্লেখ করে https://blog.angularindepth.com/everything-you-need-to- ज्ञान-about-the-expressionchangedceedithasbeencheckederror-error-e3fd9ce7dbb4

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

1) চেঞ্জডেক্টরআরফ ব্যবহার করুন

2) সেটটাইমআউট ব্যবহার করুন। এটি আপনার কোডকে অন্য ভিএম-এ ম্যাক্রো-টাস্ক হিসাবে কার্যকর করবে। কৌণিক যাচাইকরণ প্রক্রিয়া চলাকালীন এই পরিবর্তনগুলি দেখতে পাবেন না এবং আপনি এই ত্রুটিটি পাবেন না।

 setTimeout(() => {
        this.isLoading = true;
    });

3) আপনি যদি সত্যিই একই কোডটি ব্যবহার করে আপনার কোডটি কার্যকর করতে চান want

Promise.resolve(null).then(() => this.isLoading = true);

এটি একটি মাইক্রো-টাস্ক তৈরি করবে। বর্তমান সিঙ্ক্রোনাস কোডটি কার্যকর করা শেষ হওয়ার পরে মাইক্রো-টাস্কের সারিটি প্রক্রিয়াজাত করা হয় তাই সম্পত্তিটির আপডেট যাচাইকরণের পদক্ষেপের পরে ঘটবে।

Comments

আপনি কি স্টাইলের অভিব্যক্তি দিয়ে # 3 বিকল্পটি ব্যবহার করতে পারেন? উচ্চতার জন্য আমার কাছে স্টাইলের মত প্রকাশ রয়েছে যা শেষ পর্যন্ত মূল্যায়ন করা উচিত, কারণ এটি ইনজেকশনের সামগ্রীর উপর ভিত্তি করে।

— এন-এট

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

— ATHER

মাইক্রো-টাস্কগুলি আমার জন্য কাজ করে ...

— আলী বিগডেলি

Answer 12

@HostBinding এই ত্রুটির একটি বিভ্রান্তিকর উত্স হতে পারে।

উদাহরণস্বরূপ, যাক আপনাকে একটি উপাদানটিতে নিম্নলিখিত হোস্ট বন্ডিং রয়েছে

// image-carousel.component.ts
@HostBinding('style.background') 
style_groupBG: string;

সরলতার জন্য, আসুন এই সম্পত্তিটি নিম্নলিখিত ইনপুট সংস্থার মাধ্যমে আপডেট করা হয়েছে:

@Input('carouselConfig')
public set carouselConfig(carouselConfig: string) 
{
    this.style_groupBG = carouselConfig.bgColor;   
}

প্যারেন্ট উপাদানগুলিতে আপনি প্রোগ্রামক্রমে এটি সেটআপ করছেন ngAfterViewInit

@ViewChild(ImageCarousel) carousel: ImageCarousel;

ngAfterViewInit()
{
    this.carousel.carouselConfig = { bgColor: 'red' };
}

যা ঘটে তা এখানে:

• আপনার মূল উপাদান তৈরি করা হয়েছে
• ইমেজক্যারোসেল উপাদানটি তৈরি করা হয়েছে এবং carouselএটিকে নির্ধারিত হয়েছে (ভিউচিল্ডের মাধ্যমে)
• আমরা অ্যাক্সেস করতে পারছি না carouselযে পর্যন্ত না ngAfterViewInit()(এটা নাল হবে)
• আমরা কনফিগারেশন বরাদ্দ করি, যা সেট করে style_groupBG = 'red'
• এটি background: redহোস্ট ইমেজক্যারোসেল উপাদানটিকে পরিবর্তিত করে
• এই উপাদানটি আপনার পিতামাতার উপাদান দ্বারা 'মালিকানাধীন', সুতরাং যখন এটি পরিবর্তনগুলি পরীক্ষা করে তখন এটি পরিবর্তনটি খুঁজে পায় carousel.style.backgroundএবং এটি চালানোর ক্ষেত্রে যথেষ্ট চালাক নয় যে এটি কোনও সমস্যা নয় তাই এটি ব্যতিক্রম ছোঁড়ে।

একটি সমাধান হ'ল আরেকটি র‍্যাপার ডিভ ইনডাইডার ইমেজকারোউসেলকে পরিচয় করিয়ে দেওয়া এবং তার উপর পটভূমির রঙ সেট করা, তবে তারপরে আপনি ব্যবহারের কিছু সুবিধা পাবেন না HostBinding(যেমন পিতামাতাকে বস্তুর পুরো সীমানা নিয়ন্ত্রণ করার অনুমতি দেওয়া)।

প্যারেন্ট কম্পোনেন্টের আরও ভাল সমাধান হ'ল কনফিগারটি সেট করার পরে ডিটেক্টচেনজেস () যুক্ত করা।

ngAfterViewInit()
{
    this.carousel.carouselConfig = { ... };
    this.cdr.detectChanges();
}

এটি দেখতে এটিকে বেশ সুস্পষ্ট বলে মনে হতে পারে এবং অন্যান্য উত্তরের সাথে খুব মিল রয়েছে তবে একটি সূক্ষ্ম পার্থক্য রয়েছে।

@HostBindingউন্নয়নের সময় পর্যন্ত আপনি যে ক্ষেত্রে যুক্ত করবেন না সেই ক্ষেত্রে বিবেচনা করুন । হঠাৎ আপনি এই ত্রুটিটি পেয়ে যান এবং এটি কোনও অর্থবোধ করে বলে মনে হয় না।

Answer 13

যা হচ্ছে তা নিয়ে আমার চিন্তাভাবনাগুলি এখানে। আমি ডকুমেন্টেশন পড়িনি তবে নিশ্চিত যে ত্রুটিটি কেন প্রদর্শিত হচ্ছে তার এটিই একটি অংশ।

*ngIf="isProcessing()" 

* এনজিআইএফ ব্যবহার করার সময়, প্রতিটি সময় শর্ত পরিবর্তন হওয়ার সাথে এটি উপাদান যুক্ত বা মুছে ফেলার মাধ্যমে এটি শারীরিকভাবে ডিওএম পরিবর্তন করে। সুতরাং শর্তটি যদি ভিউতে রেন্ডার করার আগে পরিবর্তন হয় (যা কৌণিকের জগতে অত্যন্ত সম্ভব) ত্রুটি নিক্ষেপ করা হয়। উন্নয়ন এবং উত্পাদন পদ্ধতিগুলির মধ্যে ব্যাখ্যা এখানে দেখুন ।

[hidden]="isProcessing()"

[hidden]এটি ব্যবহার করার সময় শারীরিকভাবে পরিবর্তন হয় না DOMতবে কেবল elementদৃশ্য থেকে লুকিয়ে থাকে , সম্ভবত CSSপিছনে ব্যবহার করা হয়। উপাদানটি এখনও ডিওমে রয়েছে তবে শর্তের মানের উপর নির্ভর করে দৃশ্যমান নয়। এজন্য ব্যবহার করার সময় ত্রুটি ঘটবে না [hidden]।

Comments

তাহলে isProcessing()আমে জিনিস করছেন, আপনি কি ব্যবহার করা আবশ্যক !isProcessing()জন্য[hidden]

— Matthieu Charbonnier

hidden"পিছনে সিএসএস ব্যবহার করে না", এটি নিয়মিত এইচটিএমএল সম্পত্তি। বিকাশকারী.মোজিলা.আর.ইন.ইউএস

— ডকস / ওয়েবে / এইচটিএমএল / গ্লোবাল_অ্যাট্রিবিউটস_…

Answer 14

আমার সমস্যা আমি পড়া ছিল GitHub "যখন afterViewInit একটি উপাদান 'অ মডেল' মান পরিবর্তন ExpressionChangedAfterItHasBeenCheckedError" এবং ngModel যোগ করার সিদ্ধান্ত নিয়েছে -

<input type="hidden" ngModel #clientName />

এটি আমার সমস্যাটি স্থির করেছে, আমি আশা করি এটি কারও সাহায্য করবে।

Comments

যেখানে সাইটে এটি যোগ করতে বলে না ngModel। এবং আপনি কি দয়া করে বিস্তারিত বলতে পারেন কেন এটি সহায়ক হতে হবে?

— পিটার উইপ্পারম্যান

আমি যখন এই সমস্যাটি সন্ধান করছিলাম তখন এটি আমাকে লিঙ্কটি তদন্ত করতে পরিচালিত করেছিল। নিবন্ধটি পড়ার পরে আমি বৈশিষ্ট্যটি যুক্ত করেছি এবং এটি আমার সমস্যাটি স্থির করেছে। যদি কেউ একই সমস্যা নিয়ে আসে তবে এটি সহায়ক।

— দেমডাভ

Answer 15

ডিবাগিং টিপস

এই ত্রুটিটি বেশ বিভ্রান্তিকর হতে পারে এবং ঠিক কখন এটি ঘটেছিল সে সম্পর্কে ভুল ধারণা করা সহজ। আমি উপযুক্ত জায়গাগুলিতে ক্ষতিগ্রস্থ উপাদানগুলিতে এরূপ প্রচুর ডিবাগিং বিবৃতি যুক্ত করা সহায়ক বলে মনে করি। এটি প্রবাহ বুঝতে সহায়তা করে।

পিতামাতার মধ্যে এই মতামত রাখুন (সঠিক স্ট্রিং 'এক্সপ্রেসনচেঞ্জেড' গুরুত্বপূর্ণ) তবে এগুলি ব্যতীত কেবল উদাহরণ:

    console.log('EXPRESSIONCHANGED - HomePageComponent: constructor');
    console.log('EXPRESSIONCHANGED - HomePageComponent: setting config', newConfig);
    console.log('EXPRESSIONCHANGED - HomePageComponent: setting config ok');
    console.log('EXPRESSIONCHANGED - HomePageComponent: running detectchanges');

শিশু / পরিষেবাদি / টাইমার কলব্যাকগুলিতে:

    console.log('EXPRESSIONCHANGED - ChildComponent: setting config');
    console.log('EXPRESSIONCHANGED - ChildComponent: setting config ok');

যদি আপনি detectChangesনিজে নিজে চালনা করেন তবে এর জন্য লগিং যোগ করুন:

    console.log('EXPRESSIONCHANGED - ChildComponent: running detectchanges');
    this.cdr.detectChanges();

তারপরে ক্রোম ডিবাগারে কেবল 'এক্সপ্রেসচেঞ্জস' দ্বারা ফিল্টার করুন। এটি আপনাকে সেট করা প্রতিটি কিছুর প্রবাহ এবং শৃঙ্খলা প্রদর্শন করবে এবং ঠিক ঠিক কোন সময়ে কৌণিক ত্রুটি নিক্ষেপ করবে।

ব্রেক-পয়েন্টগুলি রাখতে আপনি ধূসর লিঙ্কগুলিতেও ক্লিক করতে পারেন।

আপনার অ্যাপ্লিকেশন জুড়ে একইরকম নামযুক্ত বৈশিষ্ট্য রয়েছে style.backgroundকিনা তা লক্ষ্য রাখার মতো (যেমন ) আপনি যেটিকে নিজের মনে করছেন তাকে ডিবাগ করছেন - এটি একটি অস্পষ্ট রঙের মানকে সেট করে make

Answer 16

আমার ক্ষেত্রে, আমি একটি ASYNC সম্পত্তি ছিল LoadingServiceএকটি BehavioralSubject সঙ্গেisLoading

[লুকানো] মডেল ব্যবহার করে কাজ করে তবে * এনজিআইফ ব্যর্থ হয়

    <h1 [hidden]="!(loaderService.isLoading | async)">
        THIS WORKS FINE
        (Loading Data)
    </h1>

    <h1 *ngIf="!(loaderService.isLoading | async)">
        THIS THROWS ERROR
        (Loading Data)
    </h1>

Answer 17

একটি সমাধান যা rxjs ব্যবহার করে আমার জন্য কাজ করেছে

import { startWith, tap, delay } from 'rxjs/operators';

// Data field used to populate on the html
dataSource: any;

....

ngAfterViewInit() {
  this.yourAsyncData.
      .pipe(
          startWith(null),
          delay(0),
          tap((res) => this.dataSource = res)
      ).subscribe();
}

Comments

সমস্যাযুক্ত কোডটি কী ছিল? এখানে সমাধান কি?

— এমকেবি

হাই @ এমকেবি সমস্যাটি ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.হ'ল যখন ডিওএম পরিবর্তিত হয় যখন মান পরিবর্তন শুরু হয়

— সন্দীপ কে নায়ার

হাই, আমি বলতে চাইছি সমস্যাটি কাটিয়ে উঠতে আপনি এখানে কী করেছেন। আপনি এর আগে rxjs মোটেও ব্যবহার করেননি বা বিলম্ব () যুক্ত করেছেন, বা স্টার্ট উইথ () যুক্ত করেছেন? আমি ইতিমধ্যে বিভিন্ন rxjs পদ্ধতিতে rxjs ব্যবহার করেছি তবে তবুও ত্রুটিটি পেয়েছি, আমি মিস্টারকে সমাধান করার আশাবাদী :(

— এমকেবি

যুক্ত delayত্রুটি দূরে যেতে। এটি একইভাবে কাজ করে setTimeout।

— লাজার লজুবেনভিয়ে

Answer 18

আয়নিক 3 এ আমার এই ধরণের ত্রুটি ছিল (এটি প্রযুক্তি স্ট্যাকের অংশ হিসাবে কৌণিক 4 ব্যবহার করে)।

আমার জন্য এটি এটি করছিল:

<ion-icon [name]="getFavIconName()"></ion-icon>

তাই আমি শর্তসাপেক্ষে একটি ধরণ পরিবর্তন করার চেষ্টা ছিল আয়ন-আইকন A থেকে pinএকটি থেকে remove-circle, একটি মোড প্রতি একটি পর্দায় অপারেটিং হয়।

আমি অনুমান করছি এর *ngIfপরিবর্তে আমাকে যুক্ত করতে হবে।

Answer 19

আমি যুক্ত করার সময় আমার ইস্যুটি প্রকাশিত হয়েছিল *ngIfতবে এটি কারণ ছিল না। মডেলটি {{}}ট্যাগগুলিতে পরিবর্তন করে *ngIfপরে বিবৃতিতে পরে পরিবর্তিত মডেলটি প্রদর্শনের চেষ্টা করার কারণে ত্রুটি হয়েছিল । এখানে একটি উদাহরণ:

<div>{{changeMyModelValue()}}</div> <!--don't do this!  or you could get error: ExpressionChangedAfterItHasBeenCheckedError-->
....
<div *ngIf="true">{{myModel.value}}</div>

সমস্যা সমাধানের জন্য, আমি changeMyModelValue()এমন জায়গায় পরিবর্তন করেছি যেখানে আরও অর্থবোধ তৈরি হয়েছিল।

আমার পরিস্থিতিতে changeMyModelValue()যখনই কোনও শিশু উপাদান ডেটা পরিবর্তন করে আমি ফোন করতে চেয়েছিলাম । এটি প্রয়োজনীয় ছিল আমি সন্তানের উপাদানগুলিতে একটি ইভেন্ট তৈরি এবং নির্গত করি যাতে পিতা-মাতা এটি পরিচালনা করতে পারে (কল করে changeMyModelValue()দেখুন htt

Answer 20

আমি আশা করি এটি এখানে কাউকে আসতে সহায়তা করবে: আমরা ngOnInitনিম্নলিখিত পদ্ধতিতে পরিষেবা কল করি এবং displayMainডিওমে উপাদানগুলির মাউন্টিং নিয়ন্ত্রণ করতে একটি ভেরিয়েবল ব্যবহার করি ।

component.ts

  displayMain: boolean;
  ngOnInit() {
    this.displayMain = false;
    // Service Calls go here
    // Service Call 1
    // Service Call 2
    // ...
    this.displayMain = true;
  }

---

এবং উপাদান। html

<div *ngIf="displayMain"> <!-- This is the Root Element -->
 <!-- All the HTML Goes here -->
</div>

Answer 21

আমি এই ত্রুটিটি পেয়েছি কারণ আমি উপাদান.ইটিএমটিএলে একটি ভেরিয়েবল ব্যবহার করছিলাম যা घटक.ts হিসাবে ঘোষিত হয়নি। আমি এইচটিএমএলের অংশটি সরিয়ে ফেললে, এই ত্রুটিটি চলে গেল।

Answer 22

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

Answer 23

যার সাথে এটি সংগ্রাম করছে To এই ত্রুটিটি সঠিকভাবে ডিবাগ করার জন্য এখানে একটি উপায়: https://blog.angular-university.io/angular-debugging/

আমার ক্ষেত্রে, সত্যিকার অর্থে আমি এই এনজিএফের পরিবর্তে এই [লুকানো] হ্যাক ব্যবহার করে এই ত্রুটি থেকে মুক্তি পেয়েছি ...

কিন্তু লিঙ্ক আমি প্রদান করা এটি আমাকে সক্রিয় দোষী * ngIf :)

উপভোগ করুন।

Comments

এর hiddenপরিবর্তে ব্যবহার করা ngIfকোনও হ্যাক নয়, বা এটি সমস্যার মূল বিষয়টিও দেখায় না। আপনি সমস্যাটি কেবল দূরে সরিয়ে রেখেছেন।

— লাজার লজুবেনভিভি

অন্য কোনও তালিকাভুক্ত নয়, এখানে কাজ হয়েছে

— ডিউঞ্জ

Answer 24

সমাধান ... পরিষেবাদি এবং rxjs ... ইভেন্ট প্রেরক এবং সম্পত্তি বাঁধাই উভয়ই rxjs ব্যবহার করুন..আপনি এটি নিজের, আরও নিয়ন্ত্রণ, ডিবাগ করা সহজতর করে প্রয়োগ করা ভাল। মনে রাখবেন ইভেন্ট ইভেন্ট প্রেরকরা rxjs ব্যবহার করছেন। সহজভাবে, একটি পরিষেবা তৈরি করুন এবং একটি পর্যবেক্ষণযোগ্য মধ্যে, প্রতিটি উপাদান থা পর্যবেক্ষকের সাবস্ক্রাইব করুন এবং হয় প্রয়োজন হিসাবে নতুন মান বা মহাকাশ মান পাস

Comments

কেবল এটিই প্রশ্নের উত্তর দেয় না, এটি ভয়ানক পরামর্শও। ছেলেরা, আপনি অ্যাংুলারের সিডি ত্রুটিগুলি পেয়ে যাচ্ছেন তাই দয়া করে নিজেকে rxjs রিম্প্লেমেন্ট করবেন না। :)

— লাজার লজুবেনভিভি