在调用构造函数或ngOnInit之前呈现的组件

问题描述 投票:0回答:1

我是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 }}&nbsp;
      <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;
  }
}
angular
1个回答
0
投票

您是否忘记从父组件提供任务?如果你初始化你的任务,如@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可能适合您。

© www.soinside.com 2019 - 2024. All rights reserved.