为什么无法选择我的 Angular Material Design 选择选项？

Question

我刚刚设法在 Angular 8 中使用 Firestore 中的项目填充了一个选择下拉菜单。但是我无法选择这些选项，即它们显示在下拉列表中，但是当我单击它们时没有输入到表单中。 （验证器错误消息仍然显示。）在调试或浏览器控制台中没有错误。

更新：如果我删除了 html 的材料设计部分并使其成为“常规”选择下拉列表，如下所示，它可以工作。我需要用mat-select 更改代码中的哪些内容才能让它在那里工作？

<select formControlName="moduleID" (change)="changeModule($event.target.value)">
   <option *ngFor="let module of modules" [ngValue]="module.payload.doc.data().moduleID">{{module.payload.doc.data().moduleID}}</option>
</select>

test.component.html（在第二个 div 中有问题的选择）：

<form class="create-form" [formGroup]="stopSessionForm" novalidate (ngSubmit)="onSubmit(stopSessionForm.value)">

    <div class="form-group">
        <mat-radio-group formControlName="phase" (change)="getModules($event)">
            <mat-radio-button value=1>Phase 1</mat-radio-button>
            <mat-radio-button value=2>Phase 2</mat-radio-button>
        </mat-radio-group>
        <ng-container *ngFor="let validation of validation_messages.phase">
            <mat-error
                *ngIf="stopSessionForm.get('phase').hasError(validation.type) && (stopSessionForm.get('phase').dirty || stopSessionForm.get('phase').touched)">
                {{validation.message}}</mat-error>
        </ng-container>
    </div>

    <div class="form-group">
        <mat-form-field>
            <mat-label>Choose module/entity ID number</mat-label>
            <mat-select formControlName="moduleID" (change)="changeModule($event.target.value)">
                <mat-option *ngFor="let module of modules" [ngValue]="module.payload.doc.data().moduleID">
                    {{module.payload.doc.data().moduleID}}
                </mat-option>
            </mat-select>
            <ng-container *ngFor="let validation of validation_messages.moduleID">
                <mat-error
                    *ngIf="stopSessionForm.get('moduleID').hasError(validation.type) && (stopSessionForm.get('moduleID').dirty || stopSessionForm.get('moduleID').touched)">
                    {{validation.message}}</mat-error>
            </ng-container>
        </mat-form-field>
    </div>

    <div class="row submit-button-container">
        <button mat-raised-button class="submit-button" type="submit" [disabled]="!stopSessionForm.valid">Stop
            session</button>
    </div>
</form>

test.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { MatDialog } from '@angular/material';
import { Router } from '@angular/router';
import { FirebaseService } from '../shared/firebase.service';

@Component({
  selector: 'app-stop-session',
  templateUrl: './stop-session.component.html',
  styleUrls: ['../shared/forms.component.css']
})
export class StopSessionComponent implements OnInit {
  stopSessionForm: FormGroup;
  modules;

  validation_messages = {
    'phase': [
      { type: 'required', message: 'Phase is required.' },
    ],
    'moduleID': [
      { type: 'required', message: 'Module/entity ID number is required.' },
    ],
  };

  constructor(
    private fb: FormBuilder,
    private router: Router,
    public firebaseService: FirebaseService
  ) { }

  ngOnInit() {
    this.createForm();
    this.getModules();
  }

  getModules = () => {
    this.firebaseService
    .getModules(this.stopSessionForm.value.phase)
    .subscribe(res =>(this.modules = res));
  }

   // Choose module using select dropdown ----- NEEDED??------
   changeModule(e) {
    this.stopSessionForm.value.moduleID.setValue(e.target.value, {
      onlySelf: true
    })
    console.log(this.stopSessionForm.value.moduleID)
  }

  createForm() {
    this.stopSessionForm = this.fb.group({
      phase: ['1', Validators.required],
      moduleID: [null, Validators.required],
    });
  }

  resetFields() {
    this.stopSessionForm = this.fb.group({
      phase: new FormControl('1', Validators.required),
      moduleID: new FormControl(null, Validators.required),
    });
  }

  onSubmit(value) {
    this.firebaseService.stopSession(value)
      .then(
        res => {
          this.resetFields();
          this.router.navigate(['/stop-session']);
          window.alert('Session end data has been sent successfully!');
        })
      .catch(function (error) {
        console.error("Error writing to database: ", error);
        window.alert("Error writing to database!");
      });
  }
}

firebase.service.ts：

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { AngularFireAuth } from "@angular/fire/auth";

@Injectable({
  providedIn: 'root'
})

export class FirebaseService {

  constructor(public afs: AngularFirestore) {}

  getModules(phase) {
    var collection:string = "ModulesPhase"+phase;
    return this.afs.collection(collection).snapshotChanges();
  }

//...

  };
}

Answer 1

事实证明，如果我将[ngValue] 更改为[value] 就可以了！

如果我不使用mat-select（代替标准select），使用[ngValue] 没有问题，所以我不明白为什么会这样。