我是Angular 7的初学者。
当我在getKeys(),构造函数和ngOnInit中使用断点在调试中启动应用程序时,我可以看到首先调用getKeys()。在我看来,组件在调用构造函数或ngOnInit之前呈现。为什么这样,我该怎么办?这对我来说是一个问题,因为在ngOnInit中我初始化了一个我在getKeys中使用的Map。
我的task-list.component.html的摘录
<div class="task-group" *ngFor="let key of getKeys()">
<h1><span class="key badge badge-secondary">{{ key.displayValue }}
<span class="badge badge-light">{{ getTasksByKey(key).length }}</span></span></h1>
<task *ngFor="let task of getTasksByKey(key)" [task]="task"></task>
</div>
我的task-list.component.ts的摘录
...
@Component({
selector: 'task-list',
templateUrl: './task-list.component.html',
styleUrls: ['./task-list.component.scss']
})
export class TaskListComponent implements OnInit {
@Input() tasks: Task[];
private mapExtractorByView: Map<TaskListViewEnum, KeyExtractor<Task>>;
private _viewMode: TaskListViewEnum;
constructor() {
this.viewMode = TaskListViewEnum.byDate;
}
ngOnInit() {
this.mapExtractorByView = new Map<TaskListViewEnum, KeyExtractor<Task>>();
this.mapExtractorByView.set(TaskListViewEnum.byDate, (t: Task) => new Key(t.date, formatDate(t.date, "fullDate", "fr")));
this.mapExtractorByView.set(TaskListViewEnum.byTag, (t: Task) => new Key(t.tags, t.tags));
}
getKeys() {
return CollectionUtils.extractKeys(this.tasks, this.mapExtractorByView.get(this._viewMode));
}
getTasksByKey(key: Key) {
return CollectionUtils.getElementsByKey(this.tasks, this.mapExtractorByView.get(this._viewMode), key);
}
@Input()
set viewMode(viewMode: TaskListViewEnum) {
this._viewMode = viewMode;
}
}
您是否忘记从父组件提供任务?如果你初始化你的任务,如@Input() tasks: Task[] = [];
模板应该呈现并成功运行,但模板仍将在ngOnInit
之前评估,如Angular 2: A property set during OnInit is undefined on the template中所述
另一种选择是使用OnChanges
界面。我创建了一个stackblitz,它显示了它是如何工作的 - > https://stackblitz.com/edit/angular-qoexkz?file=src%2Fapp%2Fapp.component.ts
请注意,我包含两个示例,第一个循环使用OnChanges
,第二个循环使用您使用的方法。您会注意到,如果您推送任务,OnChanges
示例将不会更新,因为OnChanges
只会在@Input tasks
的引用发生变化时触发(这就是角度的工作原理)。单击change Tasks
按钮可以观察到这一点。
根据您的需要,OnChanges
可能适合您。