如何默认选择第一个单选按钮并以角度获取它的值

Posted 2023-03-05

【中文标题】如何默认选择第一个单选按钮并以角度获取它的值

【英文标题】：How to get selected 1st radio button by default and get values of it in angular

【发布时间】：2021-07-13 21:38:23

【问题描述】：

<form>
<ul>
<li class="filter-list" [ngClass]="'active': selectedItem == item" (click)="listCategory($event, item)" *ngFor="let item of category"><input class="pixel-radio" type="radio" [id]="item" name="category">
<label [for]="item"> item </label></li>
</ul>
</form>

这是我的 html 代码

@Component(
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
)
export class ProductComponent implements OnInit 

  category:string[]=["Laptop","Mobile","TV","Camera"];
  products: Products[]=[];
  selectedCategory:string;
  cart: Cart;
  brand:["Acer","Asus","Dell","HP","Lenovo"];

listCategory(event, newValue)

this.selectedCategory=newValue

但默认值不会出现这是我在打字稿文件中的所有默认值

【问题讨论】：

你在这里混合东西..你想让 li 成为活跃的东西还是收音机..？或两者？您可以通过将 [checked]=“selectedItem === item” 添加到您的输入来设置选定的单选。

不工作，兄弟我想检查第一个单选按钮，但 [checked]=“selectedItem === item” 对我不起作用

您是否将 selectedItem 设置为组件中的第一项？

不知道怎么做可以告诉我

您的模板和组件之间似乎有些脱节。 this.category 是否与 selectedItem.. 相同？这里没有足够的代码来确定。

【参考方案1】：

请查看以下 stackblitz 链接：

https://stackblitz.com/angular/rllllvapblod?file=src%2Fapp%2Fradio-harness-example.html

您需要将第一项的属性“选中”为真或假

所以你的 HTML 会变成这样：

<form>
   <ul>
    <li class="filter-list" 
        [ngClass]="'active': selectedItem == item" 
       (click)="listCategory($event, item)" 
       *ngFor="let item of category; let i=index"
    >
           <input class="pixel-radio" 
                  type="radio" 
                 [id]="item" name="category"
                 [checked]="i===0" // Add this line
           >
           <label [for]="item"> item </label>
     </li>
  </ul>
</form>