如何预先选择依赖于Input()值的多个或单个mat-select中的选项？
如何预先选择依赖于Input()值的多个或单个mat-select中的选项？
提问于 2021-04-24 09:10:59
我已经创建了这个可重用的选择搜索组件。此组件可以具有预选的项。如果向组件传递了一个预先选择的选项数组，那么它应该预先选择这些选项。
目前，当我传递一个项目以预先选择它时，它会正确地将它添加到表单控件中，但是它不能正确显示。
我有另一个名为extractValue的输入()，用户可以在其中传递应该为选项显示的键值。
我已经尝试过compareWith函数来拉取显示值。此compareWith函数在所有输入()完全加载之前运行。所以extractValue是未定义的。如果我硬编码这个值，它似乎仍然不能解决我的问题。
为什么表单控件的设置值没有反映在UI中？
回答 1
Stack Overflow用户
发布于 2021-04-24 18:16:55
找到compareWith函数的原因后，无法获取extractValue，因为函数中的this作用域是mat-select，而extractValue的实际值存在于主组件的this中。
我没有找到任何东西，这将允许我们传递父组件的作用域。但作为一种解决办法，您可以执行以下操作：
在您的selectSearchForm.
- Then，中传递
- 的extractValue，使用：
this._parentFormGroup.value.extractValue;访问它并在您的the中进行相应的更改
下面是代码更改和工作stackblitz
private _setUpFormControls(
validators?: ISelectSearchValidators[],
selected?: any,
setInitialValue?: boolean,
multiple?: boolean
): void {
debugger;
this.selectSearchForm = this._formBuilder.group({
SelectControl: [
this._setInitialValue(selected, setInitialValue, multiple),
this._getValidatorFns(validators)
],
SearchControl: [""],
extractValue: this.extractValue
});
}
compareFn(optionOne: any, optionTwo: any): boolean {
const extractValue = this._parentFormGroup.value.extractValue;
if (typeof optionOne === "string" && typeof optionTwo === "string") {
return optionOne === optionTwo;
} else if (!!optionOne[extractValue] && !!optionTwo[extractValue]) {
return optionOne[extractValue] === optionTwo[extractValue];
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67238476
复制相关文章
相似问题
腾讯云开发者
