จะเพิ่มคุณสมบัติตามเงื่อนไขใน Angular 2 ได้อย่างไร

ฉันจะเพิ่มคุณสมบัติองค์ประกอบเช่นcheckedกล่องกาเครื่องหมายตามเงื่อนไขได้อย่างไร

รุ่นก่อนหน้าของ Angular มีNgAttrและฉันคิดว่าNgCheckedสิ่งที่ดูเหมือนจะให้ฟังก์ชั่นที่ฉันหลังจาก อย่างไรก็ตามคุณสมบัติเหล่านี้ดูเหมือนจะไม่มีอยู่ใน Angular 2 และฉันไม่เห็นวิธีอื่นในการให้บริการฟังก์ชั่นนี้

null ลบมัน:

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

หรือ

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

คำแนะนำ:

คุณสมบัติเทียบกับคุณสมบัติ

เมื่อองค์ประกอบ HTML ที่คุณเพิ่มการรวมนี้ไม่มีคุณสมบัติที่มีชื่อที่ใช้ในการผูก ( checkedในกรณีนี้) และยังไม่มีการใช้องค์ประกอบเชิงมุมหรือคำสั่งกับองค์ประกอบเดียวกันที่มี@Input() checked;แล้ว[xxx]="..."ไม่สามารถใช้

ดูเพิ่มเติมความแตกต่างระหว่างคุณสมบัติและคุณลักษณะใน HTML คืออะไร

สิ่งที่ต้องผูกมัดเมื่อไม่มีทรัพย์สินดังกล่าว

ทางเลือกที่จะ[style.xxx]="...", [attr.xxx]="...", [class.xxx]="..."ขึ้นอยู่กับสิ่งที่คุณพยายามที่จะประสบความสำเร็จ

เพราะ<input>มีcheckedแอตทริบิวต์เท่านั้น แต่ไม่มีcheckedคุณสมบัติใด[attr.checked]="..."ที่เหมาะสมสำหรับกรณีนี้

คุณสมบัติสามารถจัดการค่าสตริงได้เท่านั้น

ข้อผิดพลาดทั่วไปก็คือการ[attr.xxx]="..."ผูกค่า ( ...) นั้นจะถูกทำให้เป็นสตริงเสมอ คุณสมบัติและ@Input()s เท่านั้นที่สามารถรับค่าชนิดอื่นเช่นบูลีน, ตัวเลข, วัตถุ, ...

คุณสมบัติและคุณลักษณะส่วนใหญ่ขององค์ประกอบเชื่อมต่อกันและมีชื่อเหมือนกัน

การเชื่อมต่อคุณสมบัติคุณสมบัติ

เมื่อผูกเข้ากับคุณสมบัติคุณสมบัติยังได้รับค่าที่ทำให้เป็นสตริงจากแอตทริบิวต์เท่านั้น
เมื่อถูกผูกเข้ากับคุณสมบัติคุณสมบัติจะได้รับค่าที่ถูกผูกไว้กับมัน (บูลีน, ตัวเลข, วัตถุ, ... ) และคุณสมบัติอีกครั้งเป็นค่าสตริง

สองกรณีที่แอตทริบิวต์และชื่อคุณสมบัติไม่ตรงกัน

• เกิดข้อผิดพลาดขณะเพิ่มแอตทริบิวต์ "สำหรับ" ในป้ายกำกับในเทมเพลตเชิงมุม 2.0

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor (ดูประโยคแรกของคำอธิบายhtmlFor property reflects the value of the for- forอาจไม่ได้ผลเพราะเป็นคำหลักใน C หรือ JavaScript)

• เหตุใด colspan จึงไม่รู้จักแอตทริบิวต์ของพื้นเมืองใน Angular 2

Angular ถูกเปลี่ยนตั้งแต่นั้นและรู้เกี่ยวกับกรณีพิเศษเหล่านี้และจัดการกับมันเพื่อให้คุณสามารถผูก<label [for]="แม้ว่าจะไม่มีคุณสมบัติดังกล่าว (เหมือนกันcolspan)

ในไวยากรณ์แอตทริบิวต์ angular-2 คือ

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

เชื่อมโยงบทบาทแอ็ตทริบิวต์กับผลลัพธ์ของนิพจน์ myAriaRole

ดังนั้นสามารถใช้เช่น

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

การปรับGünterZöchbauerตอบ:

สิ่งนี้ดูเหมือนจะแตกต่างกันในขณะนี้ ฉันพยายามทำเช่นนี้เพื่อใช้คุณลักษณะ href กับแท็กจุดยึดตามเงื่อนไข คุณต้องใช้ไม่ได้กำหนดสำหรับกรณี 'ไม่ได้ใช้' ตัวอย่างเช่นฉันจะแสดงให้เห็นถึงการเชื่อมโยงที่มีเงื่อนไขมีการใช้แอตทริบิวต์ href

แท็กสมอโดยไม่ต้องแอตทริบิวต์ href กลายเป็นข้อความล้วนแสดงให้เห็นตัวยึดสำหรับการเชื่อมโยงการต่อข้อมูลจำเพาะเชื่อมโยงหลายมิติ

สำหรับการนำทางของฉันฉันมีรายการลิงก์ แต่หนึ่งในลิงก์เหล่านั้นแสดงถึงหน้าปัจจุบัน ฉันไม่ต้องการให้ลิงค์ของเพจปัจจุบันเป็นลิงค์ แต่ยังต้องการให้ปรากฏในรายการ (มีสไตล์ที่กำหนดเอง แต่ตัวอย่างนี้ง่าย)

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

สิ่งนี้สะอาดกว่าการใช้สอง * ng ถ้าฉันคิดว่าเป็นแท็กแบบช่วงชิงและจุดยึดฉันคิดว่า

หากเป็นองค์ประกอบอินพุตคุณสามารถเขียนได้เช่น ... <input type="radio" [checked]="condition">ค่าของเงื่อนไขต้องเป็นจริงหรือเท็จ

นอกจากนี้สำหรับคุณลักษณะสไตล์ ... <h4 [style.color]="'red'">Some text</h4>

คุณสามารถใช้สิ่งนี้

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

คุณสามารถใช้วิธีการที่ดีกว่าสำหรับคนที่เขียน HTML สำหรับ scss ที่มีอยู่แล้ว
HTML

[attr.role]="<boolean>"

SCSS

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

ด้วยวิธีนี้คุณไม่จำเป็นต้องทำ<boolean> ? true : nullทุกครั้ง

ที่นี่ย่อหน้าพิมพ์เฉพาะ 'isValid' เป็นจริง / มีค่าใด ๆ

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

ผมอยากที่จะมีเคล็ดลับเฉพาะสำหรับสาขาเฉพาะเพิ่มเป็นด้านล่างในรหัส แต่คุณต้องการที่จะมีเคล็ดลับใน multiplent คุณสามารถมี valdidate อาร์เรย์โดยใช้:

องค์ประกอบหลายรายการมีแอตทริบิวต์data-tooltip ที่กำหนดเอง:

1: [ 'key1ToHaveTooltip', `key2ToHaveTooltip '] รวม (ที่สำคัญ)

2: ['key1ToHaveTooltip', 'key2ToHaveTooltip']. indexOf (กุญแจ)> -1

มีคำแนะนำเครื่องมือในองค์ประกอบมากกว่า 1 องค์ประกอบ

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

Inline-Maps ก็มีประโยชน์เช่นกัน

พวกมันชัดเจนขึ้นและสามารถอ่านได้เช่นกัน

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

อีกวิธีหนึ่งในการทำสิ่งเดียวกันให้สำเร็จในกรณีที่คุณไม่ชอบไวยากรณ์ที่สามหรือngIfs (ฯลฯ )