Question

我有两个使用两个不同服务提供的数据的组件列表：

第一个列表包含一些具有随机高度的组件（在渲染之前我不知道它们的高度）
第二个列表中的组件必须根据第一个列表中的组件高度计算其高度。

两个列表都是由同一个组件使用两个* ngFor循环生成的，服务数据是从另一个子组件更改的。

问题在于，当模型数据发生变化时，两个ngFor循环都会尝试更新模板，但第二个失败是因为它依赖于尚未准备好的第一个ngFor。

我确实尝试使用ChangeDetectorRef.detectChanges（）或者监听包含第一个列表组件的QueryList发出的更改，但我仍然得到ExpressionChangedAfterItHasBeenCheckedError。

真实场景有点复杂，但这里是代码的简化版本：

https://embed.plnkr.co/sr9k0wLQtyWSATiZuqaK/

先谢谢，这是我关于stackoverflow的第一个问题：）

Answer 1

我会避免使用计算模板内高度的方法。相反，我会为视图准备数据：

<second-cmp 
  *ngFor="let cmp of generatedData" 
 [model]="cmp" 
 [height]="cmp.height"> <------------ already calculated value

然后我会订阅QueryList.changes来跟踪生成的元素的变化并计算height那里：

constructor(
  ...,
  private cdRef: ChangeDetectorRef) {}

ngAfterViewInit() {
    this.components.changes.subscribe(components => {
      const renderedCmps =  components.toArray();
      this.generatedData.forEach((x, index) => {
        switch (index) {
          case 0: // first
            x.height = renderedCmps[0].height / 2;
            break;
          case this.modelData.length: // last
            x.height = (renderedCmps[renderedCmps.length - 1].height / 2);
            break;
          default: // in-between
            x.height = (renderedCmps[index - 1].height + renderedCmps[index].height) / 2
        }
      });
      this.cdRef.detectChanges();
    });
}

+ 'px'是多余的，因为我们可以在样式绑定中指定它：

[style.height.px]="height"

<强> Plunker Example

Answer 2

出色的回应@yurzui，就像一个魅力！

在模型数据上设置height属性也消除了单独绑定它的必要性，因为我已经将整个模型的引用传递给* ngFor中的组件。

<second-cmp 
  *ngFor="let cmp of generatedData" 
 [model]="cmp"> <!-- the height doesn't need to be binded separately anymore -->

@Component({
selector: 'second-cmp',
template: `
  <li>
    <div class="item" [style.height.px]="model.height">Calculated height</div>
  </li>`
)}
export class Second {
  @Input('model') model;
  // @Input('height') height; <-- removed
}

<强> Final solution

ngFor取决于另一个ngFor来完成渲染 - 获取ExpressionChangedAfterItHasBeenCheckedError [Angular 2]

2 个答案: