Question

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

例如，让我说默认值是：“动作，喜剧”。

我的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中仅得到数组的第一个元素。我该如何解决？

Answer 1

您应该创建一个var array = JArray.Parse(json); foreach(JObject obj in array) { int id = obj.Value<int>("id"); string name = obj.Value<string>("name"); // ... }而不是单个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

这是您推荐的Sample StackBlitz。

如何用角形材料填充垫选择？

1 个答案: