当我更改单个Mat-select时，所有mat-select值都会更改
当您更改单个Mat-select时，所有Mat-select的值都会更改的原因是它们共享相同的数据源。Mat-select是Angular Material库中的一个组件，用于创建下拉选择框。
在Angular中，当多个Mat-select使用相同的数据源时，它们会共享该数据源的引用。因此，当您更改其中一个Mat-select的值时，所有使用相同数据源的Mat-select都会反映出这个更改。
要解决这个问题，您可以为每个Mat-select使用不同的数据源。这样，它们之间就不会共享引用，更改一个Mat-select的值不会影响其他Mat-select的值。
以下是一个示例，展示如何为每个Mat-select使用不同的数据源：
- 在组件中定义多个数据源变量，例如：
data1 = ['Option 1', 'Option 2', 'Option 3'];
data2 = ['Choice A', 'Choice B', 'Choice C'];- 在模板中，为每个Mat-select使用不同的数据源，例如：
<mat-form-field>
<mat-label>First Mat-select</mat-label>
<mat-select [(ngModel)]="selectedOption1">
<mat-option *ngFor="let option of data1" [value]="option">{{ option }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Second Mat-select</mat-label>
<mat-select [(ngModel)]="selectedOption2">
<mat-option *ngFor="let option of data2" [value]="option">{{ option }}</mat-option>
</mat-select>
</mat-form-field>在上面的示例中，我们为每个Mat-select使用不同的数据源（data1和data2）。这样，当您更改一个Mat-select的值时，其他Mat-select的值不会受到影响。
希望这个答案能够帮助您解决问题。如果您需要更多关于Mat-select的信息，可以参考腾讯云的Angular Material文档：Angular Material。
相关·内容
我有天(在mat-复选框中)和时间范围(在mat-select中)组件。我能够在几天内获取所有选中的值。但是，当我尝试更改小时/分钟范围(例如，星期一)时，所有天的时间范围都会更改。
浏览 22提问于2020-08-10得票数 4
回答已采纳
1回答
当我按add按钮时，它会添加另一个具有相同元素和相同动态字段的表单数组。
在表单组数组的第一个索引中，当我在类别列中更改mat-select的值时，它将根据从数据库获取的值填充作业列。我的问题是，当我添加另一个表单组数组时，mat-select仍然是动态的，但是当我在第2行，列类别中更改mat-select的值时</em
浏览 0提问于2018-11-17得票数 5
{{}}内的值是在上面的mat-select中选择的选项。 <mat-form-field fxFlex="90" appearance="outline"> <mat-selectEmail Address</mat-option>
浏览 4提问于2022-05-06得票数 0
4回答
一旦下拉列表的值被更改，我想调用一个函数。<mat-form-field style="margin-left: 70%;" appearance="fill"><mat-selectmat-option value="pending">Pending</mat-option&g
浏览 24提问于2022-11-02得票数 0
2回答
我在我的项目中使用了一个mat-select元素： <mat-select placeholder="Toppings" formControlName*ngFor="let topping of toppingList" [value]="topping"> </mat-select
浏览 2提问于2018-06-13得票数 1
回答已采纳
是否可以仅在鼠标离开选择下拉列表时触发选择更改？使用下面的示例，当我使用"multiple“并且用户检查一个选项时，我会在每次选择后立即获得更改事件。<mat-form-field> <mat-option*ngFor="let topping of topp
浏览 15提问于2018-12-14得票数 0
回答已采纳
有垫-选择，如果用户选择一个单选按钮选项，则应更改占位符。 *ngIf="!'Test-text' : 'Not-test'">
由于某些原因，我在html代码中看到占位符发生了变化；但是这种更改并不发生在页面本身。mat-select字段中的值保持不变。只有当我单击mat-select字段<em
浏览 6提问于2022-02-16得票数 0
回答已采纳
我有一个项目，其中有一个包含mat-select选择器的表单。每当用户更改输入时，我都会向用户显示一个对话框来确认此操作。现在：是否有一种方法可以使旧值返回，以防用户取消对话框？我不想这样做，比如，将当前值保存在单独的成员变量中。模板：
<mat-select [(ngModel)]="selectedTextCountingType"
浏览 2提问于2019-10-23得票数 1
2回答
我需要调用一个函数，以防mat-select的值发生变化。onChange，更改事件似乎不起作用。我在这个表单字段上没有ngModel
更新：selectionChange适用于单个选择下降，但不适用于multi-select下拉和mat-autocomplete.Is，这是可以实现的吗？
浏览 0提问于2019-03-05得票数 3
回答已采纳
我已经研究了这个站点和其他站点上提出的几乎所有其他问题，没有人试图将缺省值设置为比单个值更复杂的值。this.contentSettings.Ids = [1, 2, 3]; idsSelection: new FormControl(this.contentSettings.Ids)&l
浏览 1提问于2019-04-03得票数 1
回答已采纳
我想动态地设置默认值。当用户更改值时，我想要一个方法在组件控制器中触发并记录新值。}<select _ngcontent-keh-c129 style="padding: 10px; font-size: 12pt;">…</select>
所
浏览 11提问于2022-04-07得票数 -1
3回答
在我的用例场景中，我有一个下拉框(mat-select)，它填充了几个输入字段。任何更改都会以不同的方式填充字段。由于用户可以更改字段，所以在执行最终更改之前，如果用户同意清除(或更改)所有字段，我想问用户。如果出现“否”，则选择更改不会发生，所有字段都应保留。
我试图将用例简化为。<mat-select (selectionChange)="intercept($event.value)"
浏览 0提问于2019-05-23得票数 2
1回答
我想要达到的预期行为是:当我打开选择器字段时，在选择器的范围内，应该滚动到视图的顶部，选项应该出现在下面。我发现了一个问题，当选择器接近视口底部时，选项就会退出屏幕。我尝试在使用scrollIntoView的情况下实现自定义滚动策略，然后当选择面板溢出内容时手动重新定位。安卓和iOS上的问题太多了，所以我放弃了这个想法。
有人有类似的问题吗？如何解决这个问题？
浏览 0提问于2019-06-24得票数 1
当Angular 5材质mat-select设置为disabled时，如何更改显示选定值的文本的字体颜色。目前，它默认为灰色，我想要更改它，以便它显示深蓝色，无论是禁用还是启用。<mat-form-field>
<mat-select placeholder="Select a Product" [(ngModel)]="selected" [disabled]="isDisabledngFor="le
浏览 0提问于2018-04-29得票数 2
2回答
我需要的是:当我填写mat-select选项时，我需要将所有选项设置为选中状态。我试了很多方法，但没人管用。请帮帮忙。这是我得到的：options = { 1: 'op2', 3: 'op4'但options变量可以更改。然后，在我的HTML中，我得到了这个：
<mat-select multiple plac
浏览 0提问于2018-07-24得票数 5
回答已采纳
1回答
如果我试图用setTimeOut添加一些延迟，例如，当mat-select被触发时，mat-options弹出窗口显示没有任何延迟。我找到了一个解决方法，这样我就可以通过从一开始禁用mat-select来双击mat-select，这样我就可以检测到双击mat-select而不显示mat-options，但是当我试图从我的singleClick()函数中再次启用mat-select并再次显示mat-options弹出窗口时。理想情况下，我希望在m
浏览 15提问于2021-07-01得票数 1
2回答
我有这段代码来显示用户可以选择的颜色列表： <form> <mat-form-field appearance="fill"><mat-label>Favorite Color</mat-label>
<mat-select [(ngModel)]="selectedValue" name="food">" [ngS
浏览 14提问于2020-12-15得票数 0
回答已采纳
1回答
我有一个mat-select绑定到一个对象Id，当我更改选项时，我打开一个确认警报，我希望所选的选项只在我说“确定”时更改，如果我说“确定”，如果我取消它，我尝试选择的选项保持选中，不是在值上，而是在显示上我尝试将ngModel设置为相同的，但这没有任何作用，因为我的ngModel值没有被更改，只有选中的选项。<mat-select title="Repartidor" placeholde
浏览 1提问于2019-06-24得票数 0
我试图访问一个值，我指的是select的当前值。我使用@ViewChild装饰器，检索到的对象很大，搜索后找不到值数据。我使用本地引用#类型的，因为将它放在未定义的检索上。<mat-form-field class="input-group"> [value]="ticketT
浏览 3提问于2021-02-03得票数 0
因此，第一个下拉列表在每次您改变家庭时(每次您在下拉列表中选择某项内容)都会发生事件变化。我想增加一个新的：当我选择甜品时，products数组(第二个下拉列表)将变为空，不仅对于此行，而且对于所有行，对于所有行中的所有第二个下拉列表，因此我在第一行中的第二个下拉列表的值也将更改我用角来做这件事，每次我创建一个新的行，我创
浏览 4提问于2020-09-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
