Question

我想根据另一个单选按钮更改单选按钮的值，但该事件从未被触发，我没有控制台错误。所以，让我说我点击位置5的本田汽车，所以应该在表格中的第5位自动选择品牌思域。

我使用Angular 5和Material design 2.

这是我的模板：

<mat-list> 
    <mat-list-item *ngFor="let id of ids">
      <mat-radio-group>
        <mat-radio-button name="car" value="honda" id="honda{{id}}" (change)="onChangeCar(id,honda)">Honda</mat-radio-button>
        <mat-radio-button name="car" value="toyota" id="toyota{{id}}" (change)="onChangeCar(id,toyota)">Toyota</mat-radio-button>
      </mat-radio-group>
      <mat-radio-group>
        <mat-radio-button name="brand" value="civic" id="civic{{id}}" (change)="onChangeBrand(id)">Civic</mat-radio-button>
        <mat-radio-button name="brand" value="camry" id="camry{{id}}" (change)="onChangeBrand(id)">Camry</mat-radio-button>
      </mat-radio-group>
   </mat-list-item>
</mat-list>

在控制器中我试过这个，但品牌永远不会被触发：

@ViewChildren(MatRadioButton) rbuttons;
rbuttonsList: any[];

// This works
this.rbuttons.filter(x => x.id == 'brand13')[0].checked = true;
this.rbuttons.filter(x => x.id == 'brand131')[0].checked = true;

This give me en error : Cannot read property 'rbuttons' of undefined
// Get the ids that start with brand 13
this.rbuttonsList = this.rbuttons.filter(x => x.id.lastIndexOf('brand13', 0) === 0);
this.rbuttonsList.forEach(function (rbuttonIndex) {
    this.rbuttons.filter(x => x.id == rbuttonIndex.id)[0].checked = true;
  });

Answer 1

有两种方法可以在模板中使用动态ID引用元素。

<强> ElementRef

您可以选择使用Angular的ElementRef而不是document。这将获得本机元素，但mat-radio-button的本机版本上没有checked属性，因此这不适用于您的目的。

constructor(private elRef:ElementRef) {}

onChangeCar (id, car) {
  if (car == 'honda') {
    let el = this.elRef.nativeElement.querySelector('#civic' + id)
    el.checked = true; // there is no 'checked' property to set 
  }
}

<强> ViewChildren

由于ID是动态的，而不是需要显式ID的ViewChild，因此您可以使用ViewChildren和QueryList方法。这样做效果更好，因为它使用了Angular元素包装器，并且可以设置checked（请参阅控制台上的rbutton，有一个checked属性）。

@ViewChildren(MatRadioButton) rbuttons;

onChangeCar (id, car) {
  if (car == 'honda') {
    let rbutton = this.rbuttons.filter(x => x.id == 'civic' + id);
    rbutton[0].checked = true;
  }
}

按组件属性和模板

您可以通过模板上的checked属性进行设置，引用组件的属性。

brand = ''

onChangeCar (id, car) {
  this.brand = car; 
}

<mat-radio-group>
  <mat-radio-button name="brand" value="civic" id="civic{{id}}" 
    [checked]="brand === 'honda'"
    (change)="onChangeBrand(id)">Civic</mat-radio-button>
  <mat-radio-button name="brand" value="camry" id="camry{{id}}" 
    [checked]="brand === 'toyota'"
    (change)="onChangeBrand(id)">Camry</mat-radio-button>
</mat-radio-group>

这是一个StackBlitz（注意ViewChildren和属性方法都是活动的，因此注释掉一个）。

从角度5和材质设计2

1 个答案: