Angular 7：当value是一个有多个ID而不是一个ID的对象时，如何在Reactive Form mat-select上设置默认值？

Question

我已经查看了本网站和其他网站上提出的几乎所有其他问题，并且 none 涵盖了尝试将默认值设置为比单个值更复杂的问题。

我有一个 multi select，我想显示 selected for onload，逗号分隔。

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

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

来自 select 的列表有几个字段，而我存储和检索的信息只有 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"。这将在加载时显示值 selected，而不是占位符文本。加载的 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}，当 select 一个选项没有生成我需要的默认值 {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}}">

以后需要保存的时候再拆分出来

Angular 7：当value是一个有多个ID而不是一个ID的对象时，如何在Reactive Form mat-select上设置默认值？

Angular 7: How to set default value on Reactive Form mat-select when value is an object with several IDs rather than a single ID?

drop-down-menu

angular-material

angular

angular-reactive-forms