রাষ্ট্রকে সম্পত্তিতে বাঁধার জন্য [(এনজিএমডেল)] এবং [এনজি মডেল] এর মধ্যে পার্থক্য?

Question

এখানে একটি টেম্পলেট উদাহরণ:

<input type="number" class="form-control" [(ngModel)]="overRideRate" formControlName="OverRideRate">

<input type="number" class="form-control" [ngModel]="overRideRate" formControlName="OverRideRate">

এখানে দুজনেই একই কাজ করে। কোনটি পছন্দ হয় এবং কেন?

Comments

[ngModel]- এটি কেবল সম্পত্তির বাধ্যবাধকতা, দ্বিমুখী বাঁধাই নয়। সুতরাং নতুন মান প্রবেশ করা আপডেট হবে না overRideRate।

— ভাদিমবি

[(এনজিএমডেল)] দ্বিপথের বাইন্ডিং যা কৌণিক 2 থেকে আসে [

— ডেভিড দোয়ান

অসমর্থনের সতর্কতা: কৌণিক 6, ( angular.io/api/forms/FormControlName#use-with-ngmodel ) যুক্তরাষ্ট্রের এই: ngModel ইনপুট সম্পত্তি এবং প্রতিক্রিয়াশীল ফর্ম নির্দেশনা ngModelChange ঘটনা ব্যবহারের জন্য সাপোর্ট কৌণিক V6 মধ্যে অবচিত হয়েছে এবং হতে হবে কৌণিক v7 এ সরানো। আরো দেখুন: ( stackoverflow.com/questions/50371079/... )

— sboggs11

sboggs10 আপনি যে লিঙ্কটি সরবরাহ করেছেন তা ngModel কে প্রতিক্রিয়াশীল ফর্মের সাথে সংযুক্ত করে বোঝায়, এটি প্রায়শই প্রশ্নের সাথে সম্পর্কিত নয়।

— সিজার লিওনার্দো ওচোয়া কন্ট্রিরাস

এখানে একটি ভাল ব্যাখ্যা সম্পর্কে [(ngModel)], দুটি উপায় ডেটা কৌণিক মধ্যে বাঁধাই

— cateyes

Answer 1

[(ngModel)]="overRideRate" এর সংক্ষিপ্ত রূপ [ngModel]="overRideRate" (ngModelChange)="overRideRate = $event"

• [ngModel]="overRideRate"বাঁধাই overRideRateহয়input.value
• (ngModelChange)="overRideRate = $event"ইভেন্টটি কখন প্রকাশিত হয়েছিল overRideRateতার মান সহ আপডেট করা ।input.valuechange

একসাথে এগুলি Angular2 দ্বি-পথের বন্ধনের জন্য সরবরাহ করে।

Answer 2

[ngModel]="currentHero.name" একমুখী বাঁধার জন্য সিনট্যাক্স, যখন,

[(ngModel)]="currentHero.name" দ্বিমুখী বাইন্ডিংয়ের জন্য, এবং বাক্য গঠনটি যৌগিক থেকে:

[ngModel]="currentHero.name" এবং (ngModelChange)="currentHero.name = $event"

আপনার যদি কেবল মডেল পাস করতে হয় তবে প্রথমটি ব্যবহার করুন। যদি আপনার মডেলটির পরিবর্তন ইভেন্টগুলি শোনার প্রয়োজন হয় (উদাহরণস্বরূপ যখন ইনপুট ফিল্ডের মান পরিবর্তন হয়), তবে দ্বিতীয়টি ব্যবহার করুন।

Answer 3

এটি বেশ সহজ [] => উপাদান থেকে টেমপ্লেট () => টেমপ্লেটে উপাদানগুলির [(ngModel)]একটি চুক্তিবদ্ধ ফর্ম[ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">

আরও বিশদ এখানে: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ng মডেল

Answer 4

কৌণিক 2 + ডেটা প্রবাহ:

কৌণিকের মধ্যে ডেটা মডেল (উপাদান শ্রেণি ts.file) এর মধ্যে প্রবাহিত হতে পারে এবং নীচের শিষ্টাচারে (উপাদানটির এইচটিএমএল) দেখুন:

1. মডেল থেকে ভিউ।
2. মডেল থেকে দেখুন।
3. উভয় দিক দিয়ে ডেটা প্রবাহিত হয়, এটি 2 ওয়ে ডেটা বন্ডিং হিসাবেও পরিচিত ।

বাক্য গঠন:

দেখার মডেল:

<input type="text" [ngModel]="overRideRate">

এই বাক্য গঠনটি সম্পত্তি বাঁধাই হিসাবেও পরিচিত । এখন যদি overRideRateইনপুট ক্ষেত্রের সম্পত্তি পরিবর্তনটি স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়। ব্যবহারকারী যদি একটি সংখ্যা প্রবেশ করে তবে ভিউ আপডেট হয়overRideRate সম্পত্তি আপডেট করা হবে না।

মডেল দেখুন:

(input)="change($event)"            // calling a method called change from the component class
(input)="overRideRate=$event.target.value" // on input save the new value in the title property

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

2-উপায় ডেটা বাইন্ডিং:

<input [(ngModel)]="overRideRate" type="text" >

নিম্নলিখিত সিনট্যাক্সটি 2-উপায় ডেটা বাঁধাইয়ের জন্য ব্যবহৃত হয়। এটি মূলত উভয়ের জন্য একটি সিনট্যাকটিক চিনি:

1. মডেল দেখার জন্য বাধ্য।
2. মডেলের সাথে বাইন্ডিং ভিউ

এখন আমাদের শ্রেণীর ভিতরে কিছু পরিবর্তন ঘটে যা আমাদের দৃষ্টিভঙ্গিকে (দেখতে মডেল) প্রতিবিম্বিত করবে এবং ব্যবহারকারী যখনই ইনপুট পরিবর্তন করবেন তখন মডেলটি আপডেট হবে (মডেল থেকে দেখুন)।

Answer 5

[ngModel]কোডটি মূল্যায়ন করে এবং একটি আউটপুট উত্পন্ন করে (দ্বি-দ্বি বিন্যাস ছাড়াই) ।
[(ngModel)]কোডটি মূল্যায়ণ করে এবং একটি আউটপুট উত্পন্ন করে এবং দ্বিমুখী বাইন্ডিং সক্ষম করে ।