angular - Angular 7中的多个切换按钮默认选择值

Question

我正在寻找实例化垫切换按钮组的默认值。出于某种原因，无论何时使用 multiple 属性，值都没有按应有的方式设置。

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

主 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 并且 selectedCompanies 像预期的那样实例化并包含正确的值。但未选择切换按钮。

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

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

标签： angulartoggledefaultselected

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

尝试通过替换代码在这里运行它

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

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