Angular 在“材质”单选组上添加名称后，“角度材质”单选按钮默认选中“不工作”

在具有Angular material 5.2.5的Angular 5应用程序中，当使用此代码时，默认选中的单选按钮正在工作，但console中存在错误

代码：

<mat-radio-group [(ngModel)]="collection">
  <mat-radio-button class="collectionRadioButton" 
   *ngFor="let coll of collections" 
   [value]="coll.endPoint" 
   [checked]="coll.isDefault" 
   (change)="clearResults()">
  {{coll.label}}
  </mat-radio-button>
</mat-radio-group>

{{coll.label}

Chrome控制台中出现错误：

ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

Example 1: <input [(ngModel)]="person.firstName" name="first">   
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
at Function.TemplateDrivenErrors.missingNameException (forms.js:5891)
at NgModel._checkName (forms.js:6244)
at NgModel._checkForErrors (forms.js:6217)
at NgModel.ngOnChanges (forms.js:6099)
at checkAndUpdateDirectiveInline (core.js:12407)
at checkAndUpdateNodeInline (core.js:13935)
at checkAndUpdateNode (core.js:13878)
at debugCheckAndUpdateNode (core.js:14771)
at debugCheckDirectivesFn (core.js:14712)

错误：如果在表单标记中使用ngModel，则必须在ngModelOptions中设置name属性或将表单控件定义为“standalone”。
例1：
例2：
位于Function.templateDriverErrors.missingNameException（forms.js:5891）
在NgModel._checkName（forms.js:6244）
在NgModel.检查错误（forms.js:6217）
位于NgModel.ngOnChanges（forms.js:6099）
在checkAndUpdateDirectiveInline（core.js:12407）
在checkAndUpdateNodeLine（core.js:13935）
在checkAndUpdateNode（core.js:13878）
在debugCheckAndUpdateNode（core.js:14771）
在debugCheckDirectivesFn（core.js:14712）

但在为mat广播组添加名称时

<mat-radio-group [(ngModel)]="collection" [name]="'aList'">

---

然后单选按钮列表仍然正确生成，但默认选中的按钮不再工作

如果我没弄错的话，你不能使用

[name]=“”

而是

name=“”

您需要在[（ngModel）]附近输入name=“your_name”，然后选中的属性将不起作用，但您可以这样做

<form>  
 <mat-radio-group [(ngModel)]="radioOptions" name="radioButtons">
    <mat-radio-button [value]="'TEST1'">TEST1</mat-radio-button>
    <mat-radio-button [value]="'TEST2'">TEST2</mat-radio-button>
</mat-radio-group> </form>

  import { FormsModule } from '@angular/forms';
  export class ConfigurazioneComponent implements OnInit {
     radioOptions: string = 'TEST1'; 
  }

测试1
测试2
从'@angular/forms'导入{FormsModule}；
导出类配置组件实现OnInit{
radioOptions:string='TEST1'；
}

若要在没有名称的情况下使用对象，则集合应该是要使用的集合的实例，并添加[ngModelOptions]=“{standalone:true}”属性

代码中的示例： 组成部分：

  this.collection = this.collections.find(x => x.isDefault)

模板：

<mat-radio-group [(ngModel)]="collection">
    <mat-radio-button class="collectionRadioButton" 
                      *ngFor="let coll of collections" 
                      [value]="coll" 
                      (change)="clearResults()"
                      [ngModelOptions]="{standalone: true}" >
       {{coll.label}}
    </mat-radio-button>
  </mat-radio-group>

{{coll.label}

已经尝试过了，它对name=“{{aList}}”或name=“aList”完整代码都不起作用？看起来您的代码嵌套在

<mat-radio-group [(ngModel)]="collection">
    <mat-radio-button class="collectionRadioButton" 
                      *ngFor="let coll of collections" 
                      [value]="coll" 
                      (change)="clearResults()"
                      [ngModelOptions]="{standalone: true}" >
       {{coll.label}}
    </mat-radio-button>
  </mat-radio-group>