Как заселить коврик с угловым материалом?

Question

Эй, я пытаюсь использовать угловой материал, и у меня возникла проблема.В моем проекте я получаю такие детали фильма, как название, год, жанр и так далее.Я пытаюсь сделать всплывающее окно редактирования, и когда я добрался до редактирования жанра, у меня возникла небольшая проблема.Как я могу заполнить строку выбора жанрами, которые уже есть в фильме?

Допустим, например, что я хочу, чтобы значением по умолчанию было: "Действие, комедия".

my 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.Как я могу это исправить?

Answer 1

Вы должны создать FormGroup вместо отдельных FormControl с.

Genre в вашем фильме - string, но для списка множественного выбора потребуется массив строк, чтобы отобразить несколькоценности.Кроме того, похоже, что между genres (Action, Crime) есть пробел, который при усечении создаст дополнительное начальное пространство в Crime.Чтобы это исправить, вам нужно split на ,, а затем применить 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]],
      });

    });
}

Поскольку мы уже присваиваем значение по умолчанию для genre FormControl, он будет выбран по умолчанию в вашем шаблоне.

Итак, в вашем шаблоне вы теперь будете использовать синтаксис привязки атрибутов ([formGroup]="movieForm") для привязки к форме.И затем для mat-select, так как вы будете указывать 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>

Вот вам Sample StackBlitz для вашей ссылки.