Angular 7中的多个切换按钮默认选定值

Question

我正在寻找实例化mat-toggle-button-group的默认值。由于某些原因，无论何时使用multi属性，都不会像应有的那样设置值。

对于没有多个属性的切换组中的单个默认值，没有问题。我认为它会以相同的方式工作，但显然不会。 我的代码如下：

主要html.component，其中将表单与输入配合使用

    <app-customer-form [customer]="updateCustomer"></app-customer-form>

表格中的一部分是带有与客户相关公司的切换按钮的部分：

    <mat-button-toggle-group  #groupCompany="matButtonToggleGroup" 
             multiple="true"
             [value]="selectedCompanies"
             (change)="onValueChange(groupCompany.value)" 
             >
             <mat-button-toggle *ngFor="let item of companyList" 
         [value]="item">{{item?.name}}</mat-button-toggle>
    </mat-button-toggle-group>

在ts文件中，我正在检索对象内部的公司，并将值存储在数组/对象selectedCompanies中。检索到companyList，并且可以正常工作。我检查了console.log，并按预期方式实例化了selectedCompany并包含正确的值。但是未选择切换按钮。

很难将ts.file放在这里，因为它确实与其他组件嵌套在一起。简而言之，它看起来像这样。单击表组件中的一行时，它将向上级组件发出一个具有客户价值的事件，并且在对象内部有公司的财产。发出的值用于使用切换按钮填充表单。

form.ts文件：

export class FormComponent implements OnInit, OnChanges {
@Input() customer : ICustomer; 
companyList: ICompany[];
selectedCompanies: ICompany[];
constructor( 
    private companyService : CompanyService,
    public sharedService : SharedServices
    ) {}
ngOnInit(){
this.instantiateForm(); // retreives the values for the companyList and 
                        // other default values.
}
ngOnChanges() {
this.setSelectedCompanies();
}
setSelectedCompanies(){
this.selectedCompanies = this.customer.companies
}

有人对此有何想法？ 感谢您的帮助！

Answer 1

工作正常。我认为您是指两个具有相同属性值的对象：

请参阅此组件的html代码：

<p>
  Default appearance:
  <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
    <mat-button-toggle value="bold">Bold</mat-button-toggle>
    <mat-button-toggle value="italic">Italic</mat-button-toggle>
    <mat-button-toggle value="underline">Underline</mat-button-toggle>
  </mat-button-toggle-group>
</p>

<p>
  Legacy appearance:
  <mat-button-toggle-group appearance="legacy" name="fontStyle" aria-label="Font Style"   multiple="true" [value]="selectedCompanies">

    <mat-button-toggle *ngFor="let company of values" 
         [value]="company">{{company?.name}}</mat-button-toggle>
  </mat-button-toggle-group>
</p>

该组件的打字稿代码

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

/**
 * @title Button toggle appearance
 */
@Component({
  selector: 'button-toggle-appearance-example',
  templateUrl: 'button-toggle-appearance-example.html',
  styleUrls: ['button-toggle-appearance-example.css'],
})
export class ButtonToggleAppearanceExample {

 values:Comapny[]= [];

 selectedCompanies:Comapny[]=[];

  ngOnInit() {

this.values.push (new Comapny("First Company", "Address 1"));
this.values.push (new Comapny("Second Company", "Address 2"));
this.values.push (new Comapny("Third COmpany", "Address 3"));

this.selectedCompanies.push(this.values[0]);
this.selectedCompanies.push(this.values[1]);

  }

}


class Comapny {

constructor (name:string, address:string){
   this.name=name;
   this.address=address;
  }

  name:string;
  address:string;
}

尝试通过替换code

在此处运行它

这是带有多个属性和两个选定按钮的输出

请确保您在两个列表中都引用了相同的对象