如何使用角材料填充 mat-select? [英] How to populate mat-select with angular material?

问题描述

嘿，我正在尝试使用有角度的材料，但遇到了问题.在我的项目中，我获得了电影的详细信息，例如标题、年份、类型等.我正在尝试制作一个编辑弹出窗口，当我进入流派编辑时，我遇到了一个小问题.如何使用电影已有的类型填充选择行?

Hey I'm trying to use angular material and I'm having an issue. In my project I get movies details such as title,year,genre and so on. I'm trying to make an edit popup and when I got to the genre edit I got a little problem. how can I populate the select line with genres the movie already has?

比如说我希望默认值是:Action,Comedy".

lets say for example I want the default value to be: "Action,Comedy".

我的 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>

组件:

export class MyDialogComponent implements OnInit {

  selectedMovie: MyMovie;


  title:FormControl;
  year:FormControl;
  runtime:FormControl;
  genre:FormControl;
  director:FormControl;


  genresList: string[] = ['Action', 'Comedy', 'Horror', 'Fantasy', 'Drama', 'Romance'];

  constructor(private dataService: DataService) {
    this.selectedMovie = dataService.selectedMovie;

    this.title = new FormControl(this.selectedMovie.Title, [
      Validators.required
    ]);
    this.year = new FormControl(this.selectedMovie.Year, [
      Validators.required
    ]);
    this.runtime = new FormControl(this.selectedMovie.Runtime, [
      Validators.required
    ]);
    this.genre = new FormControl("this.selectedMovie.Genre", [
      Validators.required
    ]);
    this.director = new FormControl(this.selectedMovie.Director, [
      Validators.required
    ]);


  }

感谢任何帮助！谢谢

更新:

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 只是字符串，我试图将其更改为数组，有些错误，因为我在默认的 mat-select 中只得到数组的第一个元素.我该如何解决?

res is just string which im trying to change to array, something wrong over since i get only the first element of the array in the default mat-select.. how can i fix that?

推荐答案

您应该创建一个 FormGroup 而不是单独的 FormControls.

You should be creating a FormGroup instead of individual FormControls.

Genre 在你的电影中是一个 string 但多选列表将需要一个字符串数组来显示多个值.此外，看起来 genres(Action, Crime) 之间有一个空格，修剪后会在 Crime 中创建一个额外的起始空间.要解决这个问题，您需要将 split 按 , 然后在数组元素上应用 map 以使用 修剪.这将通过以下方式完成:

Genre in your Movie is a string but the multiple select list will need an array of string to show multiple values. Also, looks like there's a space between the genres(Action, Crime) which when trimmed will create an extra starting space in Crime. To fix that, you'll need to split by , and then apply map on the array elements to remove the extra space by using trim. This will be done by this like:

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

所以你的代码看起来像:

So your code will look something like:

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]],
      });

    });
}

由于我们已经为 genre FormControl 分配了默认值，因此它会在您的模板中被默认选中.

Since we're already assigning the default value to the genre FormControl, it will be selected by default in your template.

因此，在您的模板中，您现在将使用属性绑定语法([formGroup]="movieForm") 绑定到表单.然后对于 mat-select 因为您将指定 formControlName 作为 genre 这是 FormControl在流派"字段中，您会看到默认选中的流派.

So in your template, you'll now be using the attribute binding syntax([formGroup]="movieForm") to bind to the form. And then for the mat-select since you'll be specifying the formControlName as genre which is the FormControl for the Genre field, you'll see the Genre's selected by default.

所以你的模板看起来像:

So your template would look something like:

<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>

这是一个 示例 StackBlitz 供您参考.

Here's a Sample StackBlitz for your ref.

这篇关于如何使用角材料填充 mat-select?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！