Angular 7 中的多个切换按钮默认选择值
Multiple Toggle button default selected values in Angular 7
我正在寻找实例化 mat-toggle-button-group 的默认值。由于某种原因,无论何时使用 multiple 属性,值都不会按应有的方式设置。
对于没有多个属性的切换组中的单个默认值,没有问题。我认为它会以同样的方式工作,但显然不是。
我的代码如下所示:
Main 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 文件中,我正在检索对象中的公司并将值存储在 array/object selectedCompanies 中。 companyList 已检索并且工作正常。我检查了 console.log 并且 selectedCompanies 像预期的那样实例化并包含正确的值。但是未选择切换按钮。
很难将ts.file放在这里,因为它确实与其他组件嵌套在一起。但简而言之,它看起来像这样。当单击 table 组件中的一行时,它会向父组件发出一个事件,其中包含 customer 的值,并且在对象内部有公司的 属性 。发出的值用于使用切换按钮填充表单。
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
}
有人对此有任何想法吗?
感谢您的帮助!
它工作正常。我认为您指的是两个具有相同属性值的不同对象:
查看此组件 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
这是具有多属性和两个选定按钮的输出
请确保您在两个列表中引用了相同的对象
我正在寻找实例化 mat-toggle-button-group 的默认值。由于某种原因,无论何时使用 multiple 属性,值都不会按应有的方式设置。
对于没有多个属性的切换组中的单个默认值,没有问题。我认为它会以同样的方式工作,但显然不是。 我的代码如下所示:
Main 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 文件中,我正在检索对象中的公司并将值存储在 array/object selectedCompanies 中。 companyList 已检索并且工作正常。我检查了 console.log 并且 selectedCompanies 像预期的那样实例化并包含正确的值。但是未选择切换按钮。
很难将ts.file放在这里,因为它确实与其他组件嵌套在一起。但简而言之,它看起来像这样。当单击 table 组件中的一行时,它会向父组件发出一个事件,其中包含 customer 的值,并且在对象内部有公司的 属性 。发出的值用于使用切换按钮填充表单。
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
}
有人对此有任何想法吗? 感谢您的帮助!
它工作正常。我认为您指的是两个具有相同属性值的不同对象:
查看此组件 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
这是具有多属性和两个选定按钮的输出
请确保您在两个列表中引用了相同的对象