Primeng RadioButton标签

Question

我才刚开始学习Primeng。我正在处理单选按钮，并使用label属性显示标签。当我在任何有限制长度和宽度的组件中使用这个单选按钮时，长度较长的标签会出现在单选按钮下面，破坏外观和感觉。以下是守则：

<h5>Basic</h5>
<div class="p-field-radiobutton">
    <p-radioButton name="city" label="City(Label with lots of words)" inputId="city1"></p-radioButton>
</div>

因此，我尝试了另一种方法，我使用了标签标签，并尝试了以下内容：

component.html

<h5>Basic</h5>
<div class="p-field-radiobutton">
    <p-radioButton #labelClicked name="city" inputId="city1"></p-radioButton>
    <label (click)="onlabelClick()">
    City(Lots of words)
  </label>
</div>

component.ts

import { Component, ViewChild } from '@angular/core';
import { RadioButton } from 'primeng/radiobutton'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent { 
  @ViewChild("labelClicked") labelClicked : RadioButton
    onlabelClick(){
      this.labelClicked.onClick.emit();
//tried this also
       this.labelClicked.checked;
        }
    }

现在CSS和外观就像预期的一样，但是当我点击标签时，单选按钮不会变成“选中的”。

我希望无论何时我点击radioButton或标签，在这两种情况下，单选按钮都应该处于选中状态，并且CSS也应该和预期的一样。

我希望我能解释一下这种情况。

提前谢谢。

Answer 1

有几种方法可以累积同步标签，点击收音机组件。

• 为属性使用label ，因此需要为radioButton

设置inputId属性。

<div class="p-field-radiobutton">
    <p-radioButton name="city" value="Chicago" [(ngModel)]="city" inputId="city1">
    </p-radioButton>
    <label for="city1">Chicago</label>
</div>
<div class="p-field-radiobutton">
  <p-radioButton name="city" value="Los Angeles" [(ngModel)]="city"inputId="city2">
  </p-radioButton>
 <label for="city2">Los Angeles</label>
</div>

• 触发radioButton组件

的选择方法

<p-radioButton name="city" value="Istanbul" [(ngModel)]="city" #elm></p-radioButton>
<label  (click)="elm.select()">Istanbul</label>

即使在您的问题中，

也只是触发select方法

• 设置控件状态，以防出现反应性窗体或模板窗体，这将更新组件检查状态

。

<div class="p-field-radiobutton">
    <p-radioButton name="city" value="Earth" [(ngModel)]="city"></p-radioButton>
    <label  (click)="city = 'Earth'">Istanbul</label>
</div>