如何解决Mat-select 输入组合对象
我正在努力将组合值输入到选择中。假设我们的对象只包含一个ID 和一个名称,通常的选择方式是:
<mat-form-field>
<mat-label>Placeholder</mat-label>
<mat-select>
<mat-option *ngFor="let i of fooCollection" [value]="i.id">
{{i.name}}
</mat-option>
</mat-select>
</mat-form-field>
现在要提供一个值,我发现 this working example in the documentation 只是将 [(value)]
选项添加到 mat-select
标记中,但是由于我们在这里得到了一个组合对象,因此它不再起作用。
知道如何解决这个问题吗?非常感谢 ! 凯夫
解决方法
看看这个: 打字稿:
/** @title Select with 2-way value binding */
@Component({
selector: 'select-value-binding-example',templateUrl: 'select-value-binding-example.html',})
export class SelectValueBindingExample {
myOptions = [
new MyOptions('name1','description1' ),new MyOptions('name2','description2' ),new MyOptions('name3','description3' ),]
selectedOption = this.myOptions[2]
}//Cls
//-----------------------------------------------------//
class MyOptions{
constructor(
public name:string,public description:string
){}
}
HTML:
<mat-form-field appearance="fill">
<mat-label>Select an option</mat-label>
<mat-select [(value)]="selectedOption">
<mat-option *ngFor="let myOption of myOptions" [value]="myOption">
{{myOption.description}}
</mat-option>
</mat-select>
</mat-form-field>
<p>You selected: {{selectedOption|json}}</p>
当您添加行 <mat-select [(value)]="selectedOptionName">
时,它将“收集”进入该行 <mat-option *ngFor="let myOption of myOptions" [value]="actualValueGoesHere">
中 [value] 的任何值。
并且您可以随心所欲地使用价值。
要设置初始值,只需设置 selectedOption = this.myOptions[2](或第一个选择应该是什么)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。