为什么角度元素未定义？

Question

我有一些看法：

 <h1>Сотрудники</h1> <input class="btn btn-default" type="button" value="Добавить" (click)="add()"/> <table *ngIf="tableMode;" class="table table-striped"> <thead> <tr> <td>Пол</td> <td>Отдел</td> <td>Язык программирования</td> <td></td> </tr> </thead> <tbody *ngIf="employee"> <tr *ngFor="let e of employees$ | async; trackBy: trackByEmpID"> <ng-template [ngIf]="employee?.employeeID != e.employeeID" [ngIfElse]="edit"> <td>{{e.gender}}</td> <td>{{e.department.name}}</td> <td>{{e.language.name}}</td> <td> <button class="btn btn-sm btn-primary" (click)="editEmployee(e)">Изменить</button> <button class="btn btn-sm btn-danger" (click)="delete(e)">Удалить</button> </td> </ng-template> </tr> </tbody> </table> <div *ngIf="!tableMode" [style.display]="'none'"> <div class="form-group"> <label>Пол</label> <label> <select class="form-control" [(ngModel)]="employee.gender"> <option *ngFor="let gender of genders" [value]="gender?.value"> {{gender?.name}} </option> </select> </label> </div> <div class="form-group"> <label>Отдел</label> <label> <select class="form-control" [(ngModel)]="employee.department.name"> <option *ngFor="let d of empDepartments$ | async" [value]="d?.name"> {{d?.name}} </option> </select> </label> </div> <div class="form-group"> <label>Язык программирования</label> <label> <select class="form-control" [(ngModel)]="employee.language.name"> <option *ngFor="let l of empLanguages$ | async" [value]="l?.name"> {{l?.name}} </option> </select> </label> </div> <div> <input type="button" value="Сохранить" (click)="submit()" class="btn btn-success"/> <input type="button" value="Отмена" (click)="cancel()" class="btn btn-warning"/> </div> </div>

以及后面的一些 TypeScript 代码：

 interface Gender { name: string, value: boolean } @Component({ selector: 'emps', templateUrl: 'emps.component.html', providers: [employeeService, departmentsService, languagesService] }) export class empsComponent implements OnInit{ employee: Employee = new Employee(); employees$: Observable<Object>; empDepartments$: BehaviorSubject<Department[]> = new BehaviorSubject<Department[]>(null); empLanguages$: BehaviorSubject<Language[]> = new BehaviorSubject<Language[]>(null); tableMode: boolean = true; genders: Gender[] = [{name: "Муж", value: true}, {name: "Жен",value:false}]; constructor(private employeeService: employeeService, private languagesService: languagesService, private departmentsService: departmentsService) { } ngOnInit(): void { console.log(this.genders); this.loadAllData(); } loadAllData(){ this.employees$ = this.employeeService.getEmployees() .pipe(tap(()=> { this.departmentsService.getDepartments().subscribe((data:Department[])=>this.empDepartments$.next(data)); console.log(this.empDepartments$); this.languagesService.getLanguages().subscribe((data:Language[])=>this.empLanguages$.next(data)); console.log(this.empLanguages$); })) }

因此，如您所见，employees$、empDepartments$、empLanguages$ 和 Genders[] 都已初始化并设置集合proof1 、 proof2和proof3 。 但是，当我尝试 *ngFor 在 HTML 的 div 中对它们进行处理时，它们都是undefined 。 怎么可能？

Answer 1

首先，我真的不知道错误来自哪里，但我的猜测不在*ngFor内，而是在您的[(ngModel)] 。

您在component.ts定义

employee: Employee = new Employee(); // Does this have anything in it predefined?
// you're not changing this anywhere in your code

在你的 HTML 中

<select class="form-control" [(ngModel)]="employee.department.name"> // is this defined?
    <option *ngFor="let d of empDepartments$ | async" [value]="d?.name">
        {{d?.name}}
    </option>
</select>
...
<select class="form-control" [(ngModel)]="employee.language.name"> // what about this?
    <option *ngFor="let l of empLanguages$ | async" [value]="l?.name">
        {{l?.name}}
    </option>
</select>