কৌণিক 2 এ শর্তযুক্ত বৈশিষ্ট্য কীভাবে যুক্ত করবেন?

Question

আমি কীভাবে শর্তসাপেক্ষে checkedএকটি চেকবাক্সের একটি উপাদান বৈশিষ্ট্য যুক্ত করতে পারি ?

অ্যাঙ্গুলারের পূর্ববর্তী সংস্করণগুলি ছিল NgAttrএবং আমি মনে করি যাগুলি NgCheckedসমস্ত পরে আমার কার্যকারিতা সরবরাহ করে। যাইহোক, এই বৈশিষ্ট্যগুলি কৌণিক 2 এ বিদ্যমান বলে মনে হয় না এবং আমি এই কার্যকারিতাটি সরবরাহ করার কোনও অন্য উপায় দেখতে পাই না।

Comments

আরও দেখুন: স্ট্যাকওভারফ্লো.com

— ম্যাট্টি

আরও দেখুন: stackoverflow.com/questions/42179150/...

— codidact.com থেকে সরানোর aloisdg

গুগলরা, আপনি যদি কৌণিক উপাদানটির জন্য কোনও মান-স্বল্প বৈশিষ্ট্য চান তবে এখানে দেখুন

— ফ্রাঙ্ক নোক

Answer 1

null এটি অপসারণ:

[attr.checked]="value ? '' : null"

অথবা

[attr.checked]="value ? 'checked' : null"

ইঙ্গিত:

বৈশিষ্ট্য বনাম সম্পত্তি

যখন আপনি এই বাঁধাই যুক্ত করেন তখন এইচটিএমএল উপাদানটি যখন বাইন্ডিংয়ের সাথে ব্যবহৃত নামের সাথে ( checkedএই ক্ষেত্রে) কোনও সম্পত্তি না রাখে এবং একই উপাদানটিতে কোনও কৌণিক উপাদান বা নির্দেশিকা প্রয়োগ করা হয় না @Input() checked;, তখন [xxx]="..."ব্যবহার করা যায় না।

এছাড়াও দেখুন এইচটিএমএলে বৈশিষ্ট্য এবং বৈশিষ্ট্যের মধ্যে পার্থক্য কী?

যখন এই জাতীয় সম্পত্তি নেই তখন কী আবদ্ধ করবেন

বিকল্প আছে [style.xxx]="...", [attr.xxx]="...", [class.xxx]="..."কি আপনি সাধন করার চেষ্টা উপর নির্ভর করে।

কারণ <input>কেবল একটি checkedবৈশিষ্ট্য রয়েছে, তবে কোনও checkedসম্পত্তি [attr.checked]="..."এই নির্দিষ্ট ক্ষেত্রে সঠিক পথ নয়।

বৈশিষ্ট্যগুলি কেবল স্ট্রিংয়ের মানগুলি পরিচালনা করতে পারে

একটি সাধারণ ফাঁদ যে জন্য [attr.xxx]="..."বাইন্ডিং মান ( ...) করা হয় সবসময় stringified। শুধুমাত্র বৈশিষ্ট্য এবং @Input()গুলি অন্যান্য মান ধরণের যেমন বুলিয়ান, সংখ্যা, অবজেক্ট, ...

বেশিরভাগ বৈশিষ্ট্য এবং উপাদানগুলির বৈশিষ্ট্যগুলি সংযুক্ত থাকে এবং একই নাম থাকে।

সম্পত্তি-গুণমান সংযোগ

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

দুটি ক্ষেত্রে যেখানে বৈশিষ্ট্য এবং সম্পত্তির নাম মেলে না।

• কৌণিক 2.0 টেমপ্লেটে লেবেলে "জন্য" বৈশিষ্ট্য যুক্ত করার সময় ত্রুটি

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/html for (বর্ণনার প্রথম বাক্যটি দেখুন htmlFor property reflects the value of the for- forসম্ভবত এটি কার্যকর হয়নি কারণ এটি সি বা জাভাস্ক্রিপ্টে একটি কীওয়ার্ড)

• কোলস্প্যান কেন কৌণিক 2 এ একটি পরিচিত নেটিভ বৈশিষ্ট্য নয়?

তখন থেকেই কৌণিক পরিবর্তন করা হয়েছিল এবং এই বিশেষ কেসগুলি সম্পর্কে জানে এবং সেগুলি পরিচালনা করে যাতে এমন <label [for]="কোনও সম্পত্তি উপস্থিত না থাকলেও আপনি বেঁধে রাখতে পারেন (একই colspan)

Comments

আপনি "অ্যাটর্স" বাদ দিতে পারেন। উপসর্গ।

— ফিলিপ স্টাচোয়িয়াক

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

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

স্পষ্ট করা জন্য, আপনি প্রয়োজনattr. এই অংশ। আমি সেট করার চেষ্টা করছিলাম [href]এবং কেবলমাত্র আইটেমটির hrefসম্পত্তির উপস্থিতি থাকলে এটি সেট করা চাই । এটি ছাড়া [attr.href]'নাল'-এর মান সহ একটি href যুক্ত হবে, যা ক্লিক করা হলে বর্তমান পৃষ্ঠাটি রিফ্রেশ করবে। [attr.href]ঠিক কর.

— dudewad

@ দেদেওয়াদ যা আমার কাছে ঠিক মনে হচ্ছে না। আপনি যদি hrefএমন কোনও উপাদান সেট করে থাকেন যার মধ্যে hrefসম্পত্তি থাকে তবে ব্যবহার করার দরকার নেই attr। অন্য কিছু ভুল হতে হবে।

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

@ günter-zöchbauer ওয়েল, আমি এনজি ৪.x ব্যবহার করছি এবং <a [href]="item.href">কোথায় অপরিজ্ঞাত রয়েছে (মানটি অপরিজ্ঞাত item.hrefনয়, তবে সম্পত্তিটি hrefবিদ্যমান নেই item) এর hrefবৈশিষ্ট্যটি নির্ধারণ করছে null। আমি উত্সটি আবিষ্কার করি নি, কারণ সত্যি বলতে আমি এই মুহুর্তে খুব বেশি যত্ন নিই না (এটি একটি ছোট্ট বিবরণ), তবে attr.এটি সম্পূর্ণরূপে একটি ভিন্ন নির্দেশিকা এবং তাই এটি ভিন্নভাবে অভিনয় করা আমার কাছে অবাক করার মতো বিষয় নয়।

— dudewad

Answer 2

কৌণিক -2 এ্যাট্রিবিউট সিনট্যাক্স হয়

<div [attr.role]="myAriaRole">

আমার আরিয়াআরোলের অভিব্যক্তির ফলাফলের সাথে বিশিষ্ট ভূমিকাটি আবদ্ধ করে।

সুতরাং মত ব্যবহার করতে পারেন

[attr.role]="myAriaRole ? true: null"

Comments

সমস্যা এখানে যে যখন your expressionহয় falseDOM মধ্যে অ্যাট্রিবিউট দেখতে কেমন হবে <div checked="false">। আমি মনে করি না এটি এই উদ্দেশ্যযুক্ত প্রভাব।

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

ধন্যবাদ তবে আমি শর্তসাপেক্ষে কীভাবে এ وت্রিবিটি যুক্ত করব জিজ্ঞাসা করেছি শর্তাধীনভাবে এর মান নির্ধারণ করা হবে না।

— জোনাথন মাইলস 13

এমনকি আপনি "অ্যাটর্স" বাদ দিতে পারেন। উপসর্গ।

— ফিলিপ স্টাচোইয়াক

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

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

ওহ মানুষ, এই: নাল আশ্চর্যজনক, জিনিস জানত এটি শর্তাধীন ব্যবহার করা যেতে পারে! সমাধানের জন্য ধন্যবাদ।

— পিনারেলা

Answer 3

গেন্টার জ্যাচবাউরের উত্তরটি পরিমার্জন:

এটি এখন অন্যরকম বলে মনে হচ্ছে। আমি অ্যাঙ্কর ট্যাগটিতে শর্তসাপেক্ষে একটি href বৈশিষ্ট্য প্রয়োগ করার জন্য এটি করার চেষ্টা করছিলাম। 'প্রয়োগ করবেন না' ক্ষেত্রে আপনার অবশ্যই অপরিজ্ঞাত ব্যবহার করতে হবে। একটি উদাহরণ হিসাবে, আমি শর্তাধীন একটি href বৈশিষ্ট্য প্রয়োগ করে একটি লিঙ্ক দিয়ে প্রদর্শন করব।

হাইপারলিংক স্পেস অনুযায়ী কোনও লিংকটির জন্য একটি স্থানের স্থান নির্দেশককে হ্রেফ বৈশিষ্ট্য ছাড়াই একটি অ্যাঙ্কর ট্যাগ সরল পাঠ্যে পরিণত হয় ।

আমার নেভিগেশনের জন্য, আমার কাছে লিঙ্কগুলির একটি তালিকা রয়েছে, তবে সেই লিঙ্কগুলির মধ্যে একটিতে বর্তমান পৃষ্ঠাটি উপস্থাপন করা হয়। আমি বর্তমান পৃষ্ঠার লিঙ্কটি একটি লিঙ্ক হওয়ার জন্য চাইনি, তবে তবুও এটি তালিকায় উপস্থিত হওয়া চাই (এটিতে কিছু কাস্টম শৈলী রয়েছে, তবে এই উদাহরণটি সরলীকৃত)।

<a [attr.href]="currentUrl !== link.url ? link.url : undefined">

স্প্যান এবং অ্যাঙ্কর ট্যাগে দুটি * এনজিআইফ ব্যবহার করার চেয়ে এটি পরিষ্কার।

Answer 4

যদি এটি কোনও ইনপুট উপাদান হয় তবে আপনি এর মতো কিছু লিখতে পারেন .... <input type="radio" [checked]="condition">শর্তের মান অবশ্যই সত্য বা মিথ্যা।

শৈলীর বৈশিষ্ট্যের জন্যও ... <h4 [style.color]="'red'">Some text</h4>

Answer 5

আপনি এটি ব্যবহার করতে পারেন।

<span [attr.checked]="val? true : false"> </span>

Comments

আপনি আপনার মানটি 'ভাল' দিয়ে পরীক্ষা করেছেন। যদি এটি সত্য হয়ে যায় তবে

— খালি

Answer 6

ইতিমধ্যে বিদ্যমান স্ক্যাসের জন্য এইচটিএমএল লেখার জন্য আপনি আরও ভাল পদ্ধতির ব্যবহার করতে পারেন।
এইচটিএমএল

[attr.role]="<boolean>"

SCSS

[role = "true"] { ... }

এভাবে <boolean> ? true : nullপ্রতিবার আপনার দরকার নেই ।

Comments

এটি প্রতিটি ক্ষেত্রে কাজ করে না। উদাহরণস্বরূপ এটি উপাদানটিতে multipleবৈশিষ্ট্য নিয়ে কাজ করে না select।

— স্মার্টমাউস

Answer 7

এখানে অনুচ্ছেদটি কেবল 'isValid' মুদ্রিত হয় / এটিতে কোনও মান থাকে

<p *ngIf="isValid ? true : false">Paragraph</p>

Answer 8

কোডের নীচে যুক্ত হিসাবে আমি কেবলমাত্র একটি নির্দিষ্ট ক্ষেত্রের জন্য টুলটিপ রাখতে চেয়েছিলাম তবে আপনি মাল্টিলেটেন্টে টুলটিপ রাখতে চান যাতে আপনি একটি অ্যারে ভালডিডেট ব্যবহার করতে পারেন:

একাধিক উপাদানগুলির নিজস্ব কাস্টম ডেটা-টুলটিপ বৈশিষ্ট্য রয়েছে:

1: [ 'key1ToHaveTooltip', `key2ToHaveTooltip ']। (কী) অন্তর্ভুক্ত

2: ['key1ToHaveTooltip', 'key2ToHaveTooltip']। সূচিপত্র (কী)> -1

1 টিরও বেশি উপাদানের উপর টুলটিপ বৈশিষ্ট্য থাকতে হবে have

   <div *ngFor="let key of Keys"
             [attr.data-tooltip]="key === 'IwantOnlyThisKeyToHaveTooltipAttribute' 
                                           ? 'Hey! I am a tooltip on key matched'
                                           : null">
   </div>

Answer 9

ইনলাইন-মানচিত্রগুলিও কার্যকর।

এগুলি আরও কিছুটা স্পষ্ট এবং পাঠযোগ্য।

[class]="{ 'true': 'active', 'false': 'inactive', 'true&false': 'some-other-class' }[ trinaryBoolean ]"

একই জিনিসটি সম্পাদন করার জন্য অন্য একটি উপায়, যদি আপনি টেরিনারি সিনট্যাক্স বা ngIfগুলি (ইত্যাদি) পছন্দ না করেন।

Comments

একটি শ্রেণি একটি বৈশিষ্ট্যের চেয়ে সম্পূর্ণ আলাদা কিছু (প্রশ্নটি কী)

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

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

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

@ কোডি আপনি কী ব্যাখ্যা করতে পারেন (উদাহরণ কোড দিন) আপনার পদ্ধতিটি কীভাবে বিশিষ্টতার সাথে কাজ করবে checked(ইনপুট ট্যাগ থেকে এটি যুক্ত / সরান) <input type="checkbox" name="vehicle" value="Car" checked>? (যদি আমরা পরিবর্তন classকরতে checkboxআপনার কোডে এটা না কাজ (আমি এই পরীক্ষা করে))

— কামিল Kiełczewski