Question

我有一个带有孩子的组件，我想将一个变量传递给孩子，但是该变量需要一两秒钟才能从subscribe正确加载。

我给出了* ngIf，但仍然出现错误：

无法绑定到“事件”，因为它不是“ app-race-card”的已知属性。

这是因为从订阅实际加载事件需要花费时间，还是我错过了更大的事情？

我认为将*ngIf="event"放在元素调用中以进行<app-race-card>调用将意味着它将等待直到填充event为止，然后才尝试加载组件，然后实际通过现在出现了什么？

event.component.ts

let event;

ngOnInit() {
   this.subscribeService();
}

subscribeService() {
    this.service.eventSubject
    .subscribe(res => this.event = res);
  }

event.component.html

<comp *ngIf="event" [event]="event"></comp>

comp.component.ts

export class Component implements OnInit {

  @Input() event: IEvent;

  constructor() {
  }

  ngOnInit() {
  }

}

Answer 1

最有可能（您没有显示this.eventService.eventSubject的实际操作），但您对更改检测的运行方式感到困惑。您的eventSubject（顾名思义）可能会对某些鼠标或键盘事件做出反应。或者也许是Ajax请求，XHR甚至其他东西。所有这些机制都会触发“更改检测”运行。触发变更检测时，它会检查类的属性是否已更改（如果已更改）-它将更新视图。

在您的情况下，当组件加载时，尚未产生回调.subscribe(res => this.event = res);，因此this.event仍未定义。但是，如果您有条件地在模板*ngIf="event"中声明，Angular将忽略模板中的该字段，并且不会引发任何错误。并且在执行.subscribe(res => this.event = res);之后触发变更检测时，它将检查所有属性（包括this.event）是否已更改。而且由于this.event以前是undefined，现在具有某些值，因此它会重新呈现视图，但是这次*ngIf="event"将返回true，因此将显示该值。

p.s。您的解决方案很好。不用担心。如果您听说过?（Elvis运算符），则其原因完全相同-检查是否定义了值。

Answer 2

我认为您的可变事件可能不是IEvent的实例。或您的子组件可能无法访问它。尝试定义

event: Ievent;

在您的父母event.component.ts中。代替

let event;

由于未加载变量，无法绑定到子组件的属性吗？

2 个答案: