Angular 7: 当值是具有多个 ID 而不是单个 ID 的对象时，如何在反应式表单 mat-select 上设置默

Question

我已经查看了本网站和其他网站上提出的几乎所有其他问题，但没有一个涉及试图将默认值设置为比单个值更复杂的内容。

我有一个多选，我想显示所选的加载，逗号分隔。

this.settingControls = new FormGroup({
idsSelection: new FormControl(this.contentSettings.Ids)
});

<mat-option *ngFor="let item of availIds" [value]="item.id">
{{item | json}}
</mat-option>

要从中选择的列表有几个字段，而我存储和检索的信息只有 Id 来缩小 api 调用。

另存为availIds的列表如下所示：

const availIds = [
{id: 1, name : "somename", childId: 1, childName: "somechildname"},
{id: 1, name : "somename", childId: 2, childName: "somechildname"},
{id: 2, name : "somename", childId: 1, childName: "somechildname"},
{id: 2, name : "somename", childId: 2, childName: "somechildname"}

好的，过去我可以将单个数字数组传递到new FormControl()(请参阅上面的打字稿代码)并在 html 中[value]="item.id"值。 这将在加载时显示所选值，而不是占位符文本。加载的 ID 将包含如下内容：

this.contentSettings.Ids = [1, 2, 3];

一切都如预期的那样。

现在我想存储{id: 1, childId: 1}或{'id': 1, 'childId': 1}(它只是数据库上的 json)并将其加载到 FormControl 中，如下所示：

this.settingControls = new FormGroup({
idsSelection: new FormControl(this.contentSettings.Ids)
});

<mat-form-field fxFlex>
<mat-select multiple placeholder="Ids" formControlName="idsSelection">
<!-- to check what value is actually being retrieved before it gets to typescript -->
<!-- <mat-select-trigger *ngIf="idsSelection; let value">
{{value | json}}
</mat-select-trigger> -->
<mat-option *ngFor="let item of availIds"
[value]="{id: +item.id, childId: +item.childId}">
{{item | json}}
</mat-option>
</mat-select>
</mat-form-field>

加载一个对象{id: 1, childId: 1}该对象正是选择选项时包含的值，不会使默认值{id: 1, name : "somename", childId: 1, childName: "somechildname"}

我需要的。谁能阐明如何做到这一点？如果它知道输入的单个数字数组以某种方式映射到 id，那么我如何让它映射更复杂的对象？这绝对不是在引用时完成的，因为我以前只是将 id 保存在一个数字 [] 中。

注意：为了让每个人都可以看到，我添加了 json 管道以表明我一直在观察 html 认为我得到的内容，因为这在以前的调试会话中节省了我，我可能错过了 + 或引号。

Answer 1

这是您设置默认值的方式。

<mat-form-field fxFlex>
<mat-select multiple placeholder="Ids" formControlName="idsSelection" [value]="your default value">
<mat-option *ngFor="let item of availIds"
[value]="{id: +item.id, channel: +item.channel}">
{{item | json}}
</mat-option>
</mat-select>
</mat-form-field>

现在一些案例

如果在 上设置值，则必须在默认值上设置相同的值。

例

<mat-option *ngFor="let item of availIds"
[value]="item.value">
{{item | json}}
</mat-option>

那么在你的你必须使用相同的结构

<mat-select multiple placeholder="Ids" formControlName="idsSelection" [value]="availIds[0].value">

您也可以像这样指定默认值

this.settingControls = new FormGroup({ 
idsSelection: new FormControl(THE_DEFAULT_OPTION, []) 
});

Answer 2

我必须更改值集并保存到基元类型，所以我将 [value] 更改为

value="{{item.id}}_{{item.childId}}">

然后在我需要保存它时再次将其拆分出来。