我有一个更大的项目,我有4个嵌套*ngFor.所以创作大约200行,我认为分享不会有帮助,所以我尽可能地解释它. 问题是刷新对象后,元素被破坏并重新创建.这导致了一个性能问题(没有什么我只关注0.5秒)和滚动回到顶部.这是我的问题,我不希望这种情况发生.

数组:

 array[0-X] = For Paginator
 array[X][1-3] = contains 3 columns // #Column
 array[X][X][1-9] = divides the column in 9 blocks // #InfoBlock
 array[X][X][X][1-X] = the content of the single blocks // #Info

创建之后,用户只能在他想要的任何地方移动#Info元素.

例如,将#Info移动到另一个#InfoBlock.通过订阅,我将更改保存到数据库并重新加载整个数组.

像这样:

this.pageinator = result;

现在它会破坏div并创建它们,这导致我的布局滚动到顶部.我试过trackby,但是整个数组的原因被覆盖了它将无法正常工作.

问题: 有没有办法比较2个数组,只需对前一个数组进行更改.我知道我无法重新加载数据,但这可能会导致问题,因为该软件仅供1位用户使用.

编辑:一个例子

array[0][1][1][1] = "Content X"
array[0][1][2][2] =  undefined
// After reloading
array[0][1][1][1] =  undefined
array[0][1][2][2] =  "Content X"
// Now I want Angular to just change this 2 elements, cause the others stay the same. …

以下场景在javascript中非常容易,但是我在Angular中遇到了一些问题.

我有一个像这样的数组:

array a = ( "id" = 0, name = random(), column = 1, 2 or 3, blockrow= 1, 2 or 3)

使用ngFor我尝试现在创建一个网格,其中所有元素都在此列的colums和blocks中分隔.所以我目前的代码(工作但令人讨厌).

<div *ngFor="let a of a">
  <template [ngIf]="a.column=='1'">
    <div *ngFor="let b of a">
      <template [ngIf]="b.blockrow=='1'">
        Block 1 in column 1{{b.name}}
      </template>
    </div>
    <div *ngFor="let b of a">
      <template [ngIf]="b.blockrow=='2'">
        Block 2 in column 1{{b.name}}
      </template>
    </div>
    <div *ngFor="let b of a">
      <template [ngIf]="b.blockrow=='3'">
        Block 3 in column 1{{b.name}}
      </template>
    </div>
  </template>
</div>

我会为每一列运行这样的东西.这意味着我循环使用相同的数组12次.有什么方法可以做得更漂亮吗？

我在过去的几个小时里阅读了有关 Angular 2 中的事件监听器的内容，但我认为那里严重缺乏文档。

我想将不同 div 组（在 ngFor 创建）的高度设置为高度最大的一个。有点像Angular 1 的例子

我知道这个范围$watch已经不存在了。所以我尝试使用 Host Listener 来完成此操作，但我找不到任何好的文档。有很多针对事件等的教程"click"，"mouseover"但没有针对其他可能事件的教程。我需要像 $watch 或 onChange 这样的东西。（没有输入字段，基本元素）基本上任何有关可能的事件名称的文档都会有所帮助。

最终，Angular2 中也有上述链接的示例。

PS：找到了'window: resize'，但是'div: resize'没用。

编辑：在 maximus 的帮助下我完成了它，这是工作代码。

创建了一个指令文件：

评论.directive.ts

import { Directive, ElementRef, Input } from '@angular/core';
import { DoCheck } from '@angular/core';

@Directive({ selector: '[comments]' })

export class CommentsDirective implements DoCheck{

    style: any;

    constructor(private element: ElementRef) {

    }

    ngDoCheck() {
        console.log(this.element);
        this.style = { //scope variable style, shared …