Question

这里的要求是，我在每个列表中都将单选按钮显示为列表组，我们有2个具有单击功能的按钮，每当用户单击该按钮时，它也应该自动选择单选按钮。现在我可以放置按钮和单选按钮选择的按钮，当单击相应的子按钮时，我无法选择单选按钮，下面是代码和Stackblitz

<div class="text-center mt-5">
  <h4>Selected value is {{radioSel.name}}</h4>

  <div>
    <ul class="list-group">
      <li class="list-group-item" *ngFor="let item of data">
        <input type="radio" [(ngModel)]="radioSelected" name="list_name" value="{{item.value}}" (change)="onItemChange(item)" /> {{item.name}} &nbsp;
        <span (click)="one(item.name,'A')">A</span> &nbsp;&nbsp;

        <span (click)="two(item.name,'B')">B</span>

      </li>
    </ul>
  </div>

  <h5>{{radioSelectedString}}</h5>

</div>

TS代码

  radioSel:any;
  radioSelected:string;
  radioSelectedString:string;
   public data = [
    {
        name:'Item 1',
        value:'item_1'
     },
     {
         name:'Item 2',
         value:'item_2'
      },
      {
          name:'Item 3',
          value:'item_3'
       },
       {
           name:'Item 4',
           value:'item_4'
        },
        {
            name:'Item 5',
            value:'item_5'
         }
];
constructor() {

      this.radioSelected = "item_3";
      this.getSelecteditem();
     }

    getSelecteditem(){
      this.radioSel = this.data.find(Item => Item.value === this.radioSelected);
      this.radioSelectedString = JSON.stringify(this.radioSel);
    }

    onItemChange(item){
      this.getSelecteditem();
    }
    one(data,data1,data2){
      console.log(data,data1,data2);
    }
    two(data,data1,data2){
    console.log(data,data1,data2);
    this.radioSelected = data;
    this.data.find(item => item.value === this.radioSelected);


    }

Stackblitz URL ::-> https://stackblitz.com/edit/angular-e7utfs，如果我单击另一个外部按钮，则需要获取单选按钮值

Answer 1

我试图用以下方法解决这个问题。

为每个单选按钮id="{{ item.name }}"分配了一个动态ID。每次单击按钮都会触发方法onButtonClick(item, i)。在方法内部，我将输入元素checked的标志设置为true

HTML

<div class="text-center mt-5">
<h4>Selected value is {{radioSel.name}}</h4>

<div>
  <ul class="list-group">
        <li class="list-group-item"  *ngFor="let item of data; let i = index">
          <input type="radio" id="{{ item.name }}" [(ngModel)]="radioSelected" name="list_name" value="{{item.value}}" (change)="onItemChange(item)" /> 
          {{item.name}} &nbsp;
          <button (click)="onButtonClick(item)">A</button> &nbsp;&nbsp;

          <button (click)="two(item.name,'B')">B</button>

        </li>
  </ul>
</div>

<h5>{{radioSelectedString}}</h5>

</div>

TS代码

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
   radioSel:any;
  radioSelected:string;
  radioSelectedString:string;
   public data = [
    {
        name:'Item 1',
        value:'item_1'
     },
     {
         name:'Item 2',
         value:'item_2'
      },
      {
          name:'Item 3',
          value:'item_3'
       },
       {
           name:'Item 4',
           value:'item_4'
        },
        {
            name:'Item 5',
            value:'item_5'
         }
];
constructor() {

      this.radioSelected = "item_3";
      this.getSelecteditem();
     }

    getSelecteditem(){
      this.radioSel = this.data.find(Item => Item.value === this.radioSelected);
      this.radioSelectedString = JSON.stringify(this.radioSel);
    }

    onItemChange(item){
      this.getSelecteditem();
    }
    one(data,data1){
      console.log(data,data1);
    }
    two(data,data1){
    console.log(data,data1);
    this.radioSelected = data;

    }
    onButtonClick(data) {
      const el = document.getElementById(data.name) as HTMLInputElement;
      el.checked = true;
    }
}

Answer 2

在给定的代码中，单击按钮B时，您正在用item.name设置一个值。

它必须是item.value 而不是item.name，因为input标记与item.value绑定。

HTML：

<span (click)="two(item.value,'B')">B</span>

TS：

two(data, data1) {
  console.log(data, data1);
  this.radioSelected = data;
}

无法设置使用角度

2 个答案: