无法将属性绑定到Angular 5中的无线电组

Question

我想使用单选按钮组（Bootstrap 4）更改将应用​​于文件的操作。操作存储在fileRecord的{​​{1}}字段中。当我选择某些内容时，action中的文字未被更改，它会显示初始值。 使用Angular 5.2.8。 我做错了什么？

upgrade.component.html

<h4>{{record.action}}</h4>

upgrade.component.ts

<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>

更新 尝试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]=，它必须在Visual Studio代码中生效并发出警告：

Answer 1

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

Answer 2

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

现在我要使用ng-bootstrap

来创建和使用这样的单选按钮