Angular 5和Angular Material 2：init自动完成

Question

我正在使用Angular 5和Angular Material。

我有一份文件清单。我在表单中获取第一个文档数据，并由用户填写。

我添加了一个自动填充字段，用于检索数据库中的患者数据。使用它之后，我验证了我的表单，我得到了第二个文档数据，但我也遇到了关于自动填充字段的问题：

"ERROR TypeError: Cannot read property 'subscribe' of undefined"

而有关的变量是patient.name。以下是导致它的代码：

this.filteredPatients = this.myControl.valueChanges.pipe(
  startWith<string | Patient>(''),
  map(patient => typeof patient === 'string' ? patient : patient.name),  // < error with patient.name
  map(name => name ? this.filterPatient(name) : this.listPatients.slice())
);

这是我的组件HTML文件：

<mat-form-field class="index-full-width">
  <input
    matInput
    type="text"
    [(ngModel)]="patientChoice"
    placeholder="Patient"
    aria-label="Patient"
    [matAutocomplete]="autoPatient"
    [formControl]="myControl"
    (keyup)="getPatients($event)"
    >
    <mat-autocomplete (optionSelected)="selectPat()" #autoPatient="matAutocomplete" [displayWith]="displayFnPat">
      <mat-option *ngFor="let patient of filteredPatients | async" [value]="patient">
        <span>{{ patient.lastName }}</span>
        <small>{{patient.firstName}}</small> |
        <span>né(e) le {{ patient.dateNaissance }}</span> |
        <small>IPP: {{patient.ipp}}</small>
      </mat-option>
    </mat-autocomplete>
</mat-form-field>

组件TS文件：

@Component({
  selector: 'app-multi-index-dialog',
  templateUrl: 'indexation.multiple.component.html',
  styleUrls: ['indexation.multiple.component.css']
})
export class ModalMultiIndexComponent implements OnInit, AfterViewInit {
  @Input()
  showViewer = true;
  klinckServices: KlinckServices;
  listPatients: Patient[] = [];
  listTasksToIndex: DataTable[] = [];
  wfvd_commentaireSecretaire: '';
  myControl: FormControl = new FormControl();
  filteredPatients: Observable<any[]>;
  patientChoice: Patient;
  medecinChoice: Medecin;
  taskIndex = 0;
  constructor(public dialogRef: MatDialogRef<ModalMultiIndexComponent>,
              @Inject(MAT_DIALOG_DATA) public data: any,
              private dateAdapter: DateAdapter<Date>,
              private apiService: AlfrescoApiService) {
    console.log('ModalMultiIndexComponent - constructor');
    this.locale = 'fr';
    this.dateAdapter.setLocale('fr');
    this.klinckServices = data.klinckServices;
    this.listTasksToIndex.push(data.dataTable);
    this.getPriorities();
    this.startProcess(this.taskIndex);
  }
  ngOnInit() {
    this.filteredPatients = this.myControl.valueChanges.pipe(
      startWith<string | Patient>(''),
      map(patient => typeof patient === 'string' ? patient : patient.name),
      map(name => name ? this.filterPatient(name) : this.listPatients.slice())
    );
  }
  ngAfterViewInit() {
    // this.myControl.setValue('');
    // this.listPatients = [];
    // this.filteredPatients = new Observable<any[]>();
  }
  displayFnPat(patient: Patient): string | undefined {
    return patient ? patient.name : undefined;
  }
  filterPatient(name: string) {
    return this.listPatients.filter(patient =>
      patient.name.toLowerCase().includes(name.toLowerCase()));
  }
  getPatients(event: any) {
    let searchTerm = '';
    searchTerm += event.target.value;
    console.log(searchTerm);
    if (searchTerm.length === 2) {
      let success: any = {};
      this.klinckServices.getPatients(searchTerm)
        .then((webScriptdata) => {
            success = webScriptdata;
            this.listPatients = success.data.items;
            console.log(this.listPatients);
          },
          msg => {
            alert(msg);
          });
    }
  }
  selectPat(): void {
    console.log(this.myControl.value.nodeRef);
    console.log(this.patientChoice.nodeRef);
  }
  startProcess(indexElt) {
    // console.log(indexElt);
    // console.log(this.listTasksToIndex[0].dataRows.length);
    if (indexElt < this.listTasksToIndex[0].dataRows.length) {
      console.log('tâche: ' + this.listTasksToIndex[0].dataRows[indexElt][2]);
      this.getDetails(this.listTasksToIndex[0].dataRows[indexElt][2]);
      this.getDocNodeId(this.listTasksToIndex[0].dataRows[indexElt][2]);
    } else {
      this.dialogRef.close();
    }
    this.taskIndex = this.taskIndex + 1;
  }
  getDetails(taskId) {
    let promiseResult: any;
    this.klinckServices.getDetails(taskId)
      .then((succes) => {
          promiseResult = succes;
          this.taskId = promiseResult.data.id;
          this.documentName = promiseResult.data.description;
          this.wfvd_commentaireSecretaire = promiseResult.data.properties.wfvd_commentaireSecretaire;
          this.wfvd_nomService = promiseResult.data.properties.wfvd_nomService;
          this.wfvd_dateDocument = promiseResult.data.properties.wfvd_dateDocument ?
            new FormControl(new Date(promiseResult.data.properties.wfvd_dateDocument))
            : new FormControl(new Date());
          this.priorityChoice = {
            id : promiseResult.data.properties.bpm_priority,
            name: promiseResult.data.propertyLabels.bpm_priority
          };
          this.patientChoice = this.getPatientByNodeRef(promiseResult.data.properties.wfvd_patients);
          this.medecinChoice = this.getMedecinByNodeRef(promiseResult.data.properties.wfvd_medecin);
          this.originalPatientNodeRef = (promiseResult.data.properties.wfvd_patients !== null ?
            promiseResult.data.properties.wfvd_patients : '');
          this.originalMedecinNodeRef = (promiseResult.data.properties.wfvd_medecin !== null ?
            promiseResult.data.properties.wfvd_medecin : '');
        },
        msg => {
          alert(msg);
        });
  }
  getPatientByNodeRef( patientSearch: string) {
    return(this.listPatients.find( x => x.nodeRef === patientSearch));
  }
  getMedecinByNodeRef( medecinSearch: string) {
    return(this.listMedecins.find( x => x.nodeRef === medecinSearch));
  }
  getDocNodeId(taskId) {
    let success: any = {};
    this.klinckServices.getDocNodeId(taskId)
      .then((webScriptdata) => {
          success = webScriptdata;
          this.docNodeId = success.docNodeId;
        },
        msg => {
          console.log(msg.error);
        });
  }
  getPriorities() {
    this.listPriorities = this.klinckServices.getPriorities();
  }
  getNextDoc() {
    this.startProcess(this.taskIndex);
  }
  showPreview(event) {
    this.showViewer = false;
    if (event.value.entry.isFile) {
      this.docNodeId = event.value.entry.id;
      this.showViewer = true;
    }
  }
  onGoBack(event: any) {
    console.log('onGoBack');
    this.showViewer = false;
    this.docNodeId = null;
  }

单击表单按钮时调用方法getNextDoc()。我认为这是因为自动完成字段必须重新初始化但是如何？我在AfterViewInit生命周期钩子中尝试了不同的方法但没有成功。

UPDATE

export interface Patient {
 'dateNaissance': string;
 'description': string;
 'displayPath': string;
 'firstName': string;
 'ipp': string;
 'isContainer': string;
 'lastName': string;
 'name': string;
 'nodeRef': string;
 'parentType': string;
 'selectable': string;
 'title': string;
 'type': string;
}

Answer 1

通过在getDetails方法中初始化patientChoice和medecinChoice来解决它（其他部分）：

 if (promiseResult.data.properties.wfvd_patients) {
            this.getPatientByNodeRef(promiseResult.data.properties.wfvd_patients);
          } else {
            this.patientChoice = {} as Patient;
          }
          if (promiseResult.data.properties.wfvd_medecin) {
            this.getMedecinByNodeRef(promiseResult.data.properties.wfvd_medecin);
          } else {
            this.medecinChoice = {} as Medecin;
          }