Mat-Select 下拉菜单没有 select 任何选项

Question

所以我用补丁值加载我的表单，由于某种原因，mat-select 不会基于该值 select 。

这是我所拥有的：

  
  
  
 
   
 
    
    constructor(private _formBuilder: FormBuilder,
        private productServices : ProductsService,
        private activatedRoute: ActivatedRoute,
        private router : Router) { 
          this.moods=[
              {mood: 'steak-0', viewValue: 'Steak'},
              {mood: 'pizza-1', viewValue: 'Pizza'},
              {mood: 'tacos-2', viewValue: 'Tacos'}
            
          ];
          }
        

      ngOnInit() {
        
            this.completeProfileForm = this._formBuilder.group({
              title :['',Validators.required],
              releaseDate: ['', Validators.required],
              resolution: ['', Validators.required],
              displayName: ['', Validators.required],
              description: ['', Validators.required],
              type: ['', Validators.required],
              primary_mood: ['', Validators.required],
              secondary_mood: ['', Validators.required],
              price: [null, Validators.required],
              
            });
      }
 
    
    <mat-form-field class="form-field" appearance="fill">
                    <mat-label>Primary Mood</mat-label>
                    <mat-select formControlName="primary_mood" >
                      <mat-option *ngFor="let mood of moods" [value]="mood.value">
                        {{mood.mood}}
                      </mat-option>
                    </mat-select>
                    <mat-error *ngIf="completeProfileForm.controls.primary_mood.touched && completeProfileForm.controls.primary_mood.invalid">
                        <span *ngIf="completeProfileForm.controls.primary_mood.errors.required">Please select your artwork Type.</span>
                    </mat-error>
                  </mat-form-field>
 
   
 
  

我试图 select 任何选项未选择的选项

你们能帮帮我吗

Answer 1

我同意朱利安刘的观点。 您的 HTML 中有错字。 你说

[value]="mood.value"

但在您的 object 中，该字段名为viewValue 。

以这种方式更正您的 HTML：

<mat-option *ngFor="let mood of moods" [value]="mood.viewValue">
                    {{mood.mood}}
                  </mat-option>

要查看您的结果，请保留我的进一步建议并将这段代码放在ngOnInit()的末尾。

this.completeProfileForm.get('primary_mood').valueChanges.subscribe(selection => console.log('you selected: ' + selection));

您现在应该在控制台中看到您的选择。 现在你必须找到一种方法来利用它。