Question

我有一个Mat-select框，在编辑或从数组中选择选项之前，需要显示默认值。默认值来自Get API数组。

这是代码：

import {
  Component
} from '@angular/core';
import {
  FormControl
} from '@angular/forms';

/** @title Select with multiple selection */
@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
  styleUrls: ['select-multiple-example.css'],
})
export class SelectMultipleExample {
  questionTagsList = [{
      id: 1,
      name: "Weight Report"
    },
    {
      id: 2,
      name: "Health Report"
    },
    {
      id: 3,
      name: "Milk Report"
    },
    {
      id: 4,
      name: "Expense Report"
    },
    {
      id: 5,
      name: "GreenFeed"
    },
  ]

  displayObjects = {
    question: "What is the expense of green feed in KG?",
    question_tag: [{
        question_tag_id: 1,
        question_tag_name: "Expense"
      },
      {
        question_tag_id: 30,
        question_tag_name: "GreenFeed"
      }
    ],
  }
}

这是代码，我有两个数组，其中一个是questionTagsList选择值，另一个是来自get API的displayObjects.question_tag数组。首先，一旦HTML页面加载完毕，我需要在mat-select框上的displayObjects.question_tag数组中显示question_tag_name，然后可以从questionTagsList中选择名称。

<div class="row">
  <div class="col-sm-4">
    <h6 class="catTitle">Question Tag</h6>
  </div>
  <div class="col-sm-8">
    <mat-form-field>
      <mat-select required multiple [(ngModel)]="displayObjects.question_tag_id" name="question_tag_name" placeholder="Select Question Tag">
        <mat-option *ngFor="let queTags of questionTagsList" [value]="queTags.id">
          {{queTags.name}}
        </mat-option>
      </mat-select>
      <mat-error>Question Tag is required</mat-error>
    </mat-form-field>
  </div>
</div>
<div class="row">
  <div class="col-sm-4">
    <h6 class="catTitle">Add Questions </h6>
  </div>
  <div class="col-sm-8">
    <mat-form-field class="textField">
      <textarea required matInput [value]="displayObjects.question" [(ngModel)]="displayObjects.question" name="question" placeholder="Add Questions"></textarea>
      <mat-error>Question field is required</mat-error>
    </mat-form-field>
  </div>
</div>

在HTML中，我仅应用了一个ngFor循环，即questionTagsList，可以从questionTagsList数组中选择名称，但是要显示question_tag_name形式的question_tag，是否必须在mat-form-field上应用另一循环？请帮助我找到解决方法

Mat-select应该在选择之前显示API默认值

0 个答案: