Angular 如何使用角材质填充“mat select”？

嘿，我试着使用有角度的材料，我遇到了一个问题。在我的项目中，我得到了电影的详细信息，比如片名、年份、类型等等。我正在尝试制作一个编辑弹出窗口，当我进入体裁编辑时，我遇到了一个小问题。如何使用电影已有的类型填充选择行

比方说，我希望默认值为：“Action，Comicle”

我的html：

<mat-select placeholder="Genre" [formControl]="genre" multiple>
    <mat-option *ngFor="let genre of genresList" value="Action,Comedy" >{{genre}}</mat-option>
  </mat-select>
  <mat-error *ngIf="genre.hasError('required')">
      Title is <strong>required</strong>
    </mat-error>
</mat-form-field>

谢谢你的帮助！谢谢

更新：

this.dataService.getMovie(this.moviesToLoad[i]).subscribe(res => {

        this.movie = {
           id: this.id,
           Title: res.Title,
           Year: res.Year,
           Runtime: res.Runtime,
           Genre: res.Genre.split(","),
           Director: res.Director
          }

---

res只是我试图更改为array的字符串，由于我在默认mat select中只得到数组的第一个元素，所以出现了一些错误。。如何解决此问题？

您应该创建一个

FormGroup

，而不是单个

FormControl

s

电影中的

类型

是一个

字符串

，但多重选择列表需要一个字符串数组来显示多个值。另外，

类型之间似乎有一个空格（
动作，犯罪
），修剪后将在
犯罪
中创建一个额外的起始空格。要解决这个问题，您需要将
拆分为
，
，然后在数组元素上应用
map
，使用
trim
删除多余的空间。这将通过以下方式完成：

genre: [this.selectedMovie.Genre.split(',').map(genre => genre.trim()), [Validators.required]],

因此，您的代码将类似于：

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

...
selectedMovie: MyMovie;
movieForm: FormGroup;
genresList = ['Action', 'Comedy', 'Horror', 'Fantasy', 'Drama', 'Romance'];

constructor(
  private fb: FormBuilder,
  private dataService: DataService
) {}

ngOnInit() {

  this.dataService.getMovie('anyIndexHere')
    .subscribe(selectedMovie => {

      this.selectedMovie = {
        id: 'Some ID',
        ...selectedMovie
      }

      this.movieForm = this.fb.group({
        title: [this.selectedMovie.Title, [Validators.required]],
        year: [this.selectedMovie.Year, [Validators.required]],
        runtime: [this.selectedMovie.Runtime, [Validators.required]],
        genre: [this.selectedMovie.Genre.split(',').map(genre => genre.trim()), [Validators.required]],
        director: [this.selectedMovie.Director, [Validators.required]],
      });

    });
}

由于我们已经将默认值分配给
类型
表单控件
，因此默认情况下将在模板中选择它

因此，在模板中，您现在将使用属性绑定语法（
[formGroup]=“movieForm”
）绑定到表单。然后，对于
mat选择
，因为您将
formControlName
指定为
genre
，这是类型字段的
FormControl
，因此默认情况下您将看到类型的选择

因此，您的模板将类似于：

<form [formGroup]="movieForm">
  ...
  <mat-form-field>
    <mat-select placeholder="Movie Genre" formControlName="genre" multiple>
      <mat-option *ngFor="let genre of genresList" [value]="genre">
        {{genre}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  ...
</form>


...
{{体裁}
...

这是一个供您参考的示例。
这是我希望显示为默认值的数据。您的意思是什么？我怎样才能把它转移到formGroup？你解决了我的问题，兄弟，我真的很感谢你，但我只能看到mat select字段中的流派数组中的第一个元素，非常感谢！。但是，如何在选择行中显示默认值？现在这就是电影类型，我希望我的选项在我选择它们之前就被选中，从我得到的数据中。我现在正试图将我从api得到的字符串更改为类型数组。有些东西不管用，我更新了主帖子请看一下。。。非常感谢！
<form [formGroup]="movieForm">
  ...
  <mat-form-field>
    <mat-select placeholder="Movie Genre" formControlName="genre" multiple>
      <mat-option *ngFor="let genre of genresList" [value]="genre">
        {{genre}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  ...
</form>