时间戳

首页 > 解决方案 > Primeng 单选按钮标签

angular - Primeng 单选按钮标签

问题描述

我刚开始学习Primeng。我正在处理单选按钮并使用标签属性来显示标签。当我在任何长度和宽度受限的组件中使用此单选按钮时，长度较长的标签会出现在单选按钮下方并破坏外观。以下是代码：

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

所以我尝试了另一种方法，我使用了标签标签并尝试了以下操作：

组件.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>

组件.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 和外观符合预期，但是当我单击标签时，单选按钮不会变为“已选中”。

我希望每当我在这两种情况下单击单选按钮或标签时，单选按钮都应该处于选中状态，并且 CSS 也应该符合预期。

我希望我能够解释这个场景。

提前致谢。

标签： angularangular6primengprimeicons

解决方案

有几种方法可以使用无线电组件累积同步标签点击

  • 使用标签作为属性，因此您需要为 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组件的select方法
<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>

stackblitz 演示

推荐阅读