如何用角形材料填充垫选择? [英] 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?

例如，让我说默认值是:动作，喜剧".

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而不是单个FormControl.

You should be creating a FormGroup instead of individual FormControls.

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

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>

这是一个

Here's a Sample StackBlitz for your ref.

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