如何解决根据另一个选择更改选择的“多个”属性
我正在构建一个 Angular 应用程序,其中有两个下拉菜单。如果选择的第一个下拉列表是“Angular”,则应为第二个下拉列表启用多选。以下是相关文件:
HTML:
<mat-form-field>
<mat-label>Topic</mat-label>
<mat-select [(ngModel)]="topic">
<mat-option value="ang" (click)="onTopicClick()">Angular</mat-option>
<mat-option value="vue" (click)="onTopicClick()">Vue</mat-option>
</mat-select>
</mat-form-field>
<br>
<mat-form-field>
<mat-label>Version</mat-label>
<mat-select [multiple]="multiEnabled">
<mat-option value="1">1</mat-option>
<mat-option value="2">2</mat-option>
</mat-select>
</mat-form-field>
Component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',templateUrl: './app.component.html',//styleUrls: ['./app.component.css']
//Inline css
styles: [`
h2{
color: green
}
`]
})
export class AppComponent {
title = 'first-app';
topic = "";
multiEnabled = false;
onTopicClick(){
if(this.topic === "ang"){
this.multiEnabled = true
}
}
}
当我尝试实现上述代码时,我在控制台中收到一个错误,指出 core.js:6157 ERROR 错误:初始化后无法更改选择的 multiple
模式。 >
有什么方法可以实现这个功能吗?还是解决方法?
解决方法
尝试将您的功能放在选择而不是选项上。
html:
<select
[(ngModel)]="topic"
(change)='onTopicClick($event)'>
<option
class='option'
[value]="Angular">
Angular
</option>
<option
class='option'
[value]="Vue">
Vue
</option>
</select>
component.ts:
public onTopicClick(event) {
title = event.target.value;
this.topic = value;
console.log(value);
}
对于第二个选择,您可以使用 *ngif 语句来决定是否要显示它。
<mat-form-field
*ngIf="title === 'Angular'">
,
mat-select 的 multiple
属性不能动态改变,你可以初始化它而不是在初始化后改变它。
所以基本上你可以使用 *ngIf 作为下拉列表,根据你的第一个下拉选择来显示它。
您可以在此处参考此问题以了解您的错误: Error: Cannot change `multiple` mode of select after initialization
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。