无法将属性绑定到 Angular 5 中的单选组答案

【问题标题】：Can't bind property to radio group in Angular 5无法将属性绑定到 Angular 5 中的单选组
【发布时间】：2018-08-20 23:47:44
【问题描述】：

我想使用单选按钮组（Bootstrap 4）更改将应用于文件的操作。操作存储在fileRecord 的action 字段中。当我选择某些东西时，<h4>{{record.action}}</h4> 中的文本没有被更改，它显示初始值。使用 Angular 5.2.8。我做错了什么？

升级.component.html

<tr *ngFor="let record of fileRecords; index as i">
  <th scope="row">{{i+1}}</th>
  <td>{{record.pathName}}</td>
  <td [ngClass]="{'table-primary' : record.proposedAction=='skip',
        'table-warning' : record.proposedAction=='upgrade',
        'table-danger' : record.proposedAction=='remove'}">{{record.proposedAction}}</td>
  <td>
    <div class="btn-group form-group" data-toggle="buttons">
      <label class="btn btn-outline-warning">
        <input type="radio" name="record.pathName +'_action'" autocomplete="off" value="upgrade" [(ngModel)]="record.action" />Upgrade
      </label>

      <label class="btn btn-outline-danger">
        <input type="radio" name="record.pathName +'_action'" autocomplete="off" value="remove" [(ngModel)]="record.action" />Remove
      </label>
      <label class="btn btn-outline-primary">
        <input type="radio" name="record.pathName +'_action'" autocomplete="off" value="skip" [(ngModel)]="record.action" />Do not touch
      </label>
    </div>
  <h4>{{record.action}}</h4>
  </td>
</tr>

升级组件.ts

import { Component, OnInit, Input } from '@angular/core';

import { FileRecord } from "../../_models/fileRecord";
import { StorageService } from "../../_services/storage.service";

@Component({
  templateUrl: './sector-upgrade.component.html'
})
export class SectorUpgradeComponent implements OnInit {

  constructor(private storageService: StorageService) { }

  ngOnInit() {
    this.getAvailableFolders();
  }

  availableFolders: string[];
  selectedFolder: string = null;

  @Input() fileRecords: FileRecord[];

  getAvailableFolders() {
    this.storageService.getAvailableFolders().subscribe( data => {
      if (data) {
        this.availableFolders = data as string[];
      }    
    } );
  }

  getUpgradeFiles(folder: string) {
    this.storageService.getUpgradeFiles(folder).subscribe( data => {
      if (data) {
        this.fileRecords = data as FileRecord[];
        this.fileRecords.forEach(fileRecord => {
          fileRecord.action = fileRecord.proposedAction;
        });
      }    
    } );
  }

  onSelectFolder(folder: string): void {
    if (folder != this.selectedFolder) {
      this.selectedFolder = folder;
      this.getUpgradeFiles(folder);
    }
  }    
}

更新： 试过[value]=而不是value=，它必须在Visual Studio Code中生效并给出这样的警告：

【问题讨论】：

标签： angular typescript data-binding angular5

【解决方案1】：

您可以尝试使用 [value]="something" 而不是 value="something"

【讨论】：

【解决方案2】：

问题出在data-toggle="buttons"。由Bootstrap的JS提供，与Angular有冲突。

为了创建和使用这样的单选按钮，我现在使用 ng-bootstrap

【讨论】：