Question

我已经查看了该网站和其他网站上的几乎所有其他问题，没有人试图将默认值设置为比单个值复杂的地方。

我有一个多重选择，我想显示所选的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>

要选择的列表具有多个字段，而我存储和检索的信息仅具有使api调用更小的ID。

另存为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}（在db上只是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]更改为

page

然后在需要保存时再次将其拆分。

角度7：当value是具有多个ID而不是单个ID的对象时，如何在“反应形式”垫选中设置默认值？

2 个答案: