Question

在我的ng2模块中，另一个模块调用一个函数来创建一个对象并将其推送到一个绑定到模板中* ngFor的数组。根据文档https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html，它应该自动检测更改。我可以控制日志数组，一切都在那里，但选择器标签保持为空。如果我使用静态数组作为测试它可以工作。我在这里以及其他网站和Docs中的ChangeDetectorRef查看了所有看似相似的问题，但我发现的只是几个月前，如果我尝试的话会导致错误。

这是marker.component.html：

<div *ngFor="let Marker of Markers" [ngStyle]="Marker.style" (click)="scrollXY(Marker.scrollX, Marker.scrollY)" class="cq">
    {{Marker.title}}
</div>

这是marker.component.ts：

import { Component } from '@angular/core';
import { Marker } from './marker';
import { WindowService } from '../../window.service';

@Component({
  selector: 'cm-marker',
  templateUrl: 'marker.component.html',
  styleUrls: ['marker.component.css']
})
export class MarkerComponent {

  Markers: Marker[];
  nx0: number;
  ny0: number;
  nx1: number;
  ny1: number;

  constructor(private windowService: WindowService) {
    this.Markers = [
      {
      title: 'Token',
      scrollX: 0,
      scrollY: 0,
      style: {
        'position': 'absolute',
        'z-index': (200 - 5),
        'left': 199900 +'px',
        'top': 199900 +'px',
        'background-color': '#587188'
      }
    }
    ]
  }

  scrollXY(x, y) {
    this.windowService.scrollXY(x, y);
  }

  createMarker(cmelement, x: number, y: number, x1: number, y1: number) {

    let m = (cmelement.y1 - cmelement.y0)/(cmelement.x1  - cmelement.x0);
    let height = Math.abs(cmelement.y1 - cmelement.y0);
    let width = Math.abs(cmelement.x1 - cmelement.x0);
    let sin = (cmelement.y1 - cmelement.y0)/Math.sqrt(Math.pow(height, 2)+Math.pow(width, 2));
    let cos = (cmelement.x1  - cmelement.x0)/Math.sqrt(Math.pow(height, 2)+Math.pow(width, 2));
    let d = 400 * (1 - Math.sqrt(Math.abs(cos * sin)));
    if(x1 == 0 && y1 == 0){
      this.ny0 = Math.ceil(y + (sin * d));
      this.nx0 = Math.ceil(x + (cos * d));
      this.ny1 = Math.ceil(y + height - (sin * d/2));
      this.nx1 = Math.ceil(x + width - (cos * d/2));            
    }
    if(x1 == 0 && y1 != 0){
      this.ny0 = Math.ceil(y + height + (sin * d));
      this.nx0 = Math.ceil(x + (cos * d));
      this.ny1 = Math.ceil(y - (sin * d/2));
      this.nx1 = Math.ceil(x + width - (cos * d/2));            
    }
    if(x1 != 0 && y1 == 0){
      this.ny0 = Math.ceil(y + (sin * d));
      this.nx0 = Math.ceil(x + width + (cos * d));
      this.ny1 = Math.ceil(y + height - (sin * d/2));
      this.nx1 = Math.ceil(x - (cos * d/2));            
    }
    if(x1 != 0 && y1 != 0){
      this.ny0 = Math.ceil(y + height+ (sin * d));
      this.nx0 = Math.ceil(x + width + (cos * d));
      this.ny1 = Math.ceil(y - (sin * d/2));
      this.nx1 = Math.ceil(x - (cos * d/2));            
    }
    let marker0 = {
      title: cmelement.links[1].title,
      scrollX: cmelement.x1,
      scrollY: cmelement.y1,
      style: {
        'position': 'absolute',
        'z-index': (200 - cmelement.prio),
        'left': this.nx0,
        'top': this.ny0,
        'background-color': cmelement.style.object.color0
      }
    }
    // console.log(marker0);
    this.Markers.push(marker0);
    let marker1 = {
      title: cmelement.links[0].title,
      scrollX: cmelement.x0,
      scrollY: cmelement.y0,
      style: {
        'position': 'absolute',
        'z-index': (200 - cmelement.prio),
        'left': this.nx1,
        'top': this.ny1,
        'background-color': cmelement.style.object.color0
      }
    }
    this.Markers.push(marker1);
    // console.log(this.Markers);

  }
}

静态写的＆＃34;令牌＆＃34;显示并按预期工作，但没有新添加。

Answer 1

感谢@ Carbonsound1的建议，我找到了解决方案：

函数@ViewChild将组件或指令绑定到父组件。

RC6的重要性：之前已弃用的@ Component.directives已被删除。因此在组件中声明它会引发错误。相反，您需要在app.module文件中的声明中声明它。

我已将Carbonsound1s plnkr与更改分开：

更新了app.module.ts：

import { AppComponent }   from './app.component';
import { MarkerComponent } from './marker.component';

@NgModule({
  imports: [ 
    BrowserModule,
    CommonModule
  ],
  declarations: [ AppComponent,
                  MarkerComponent],
  bootstrap:    [ AppComponent ],
  entryComponents: [  ]
})
export class AppModule { }

更新了app.component.ts：

@Component({
  selector: 'my-app',
  template: `
  <button (click)="createMarker()">create marker</button>
  <my-marker></my-marker>
  `
})

* ngFor内的Angular 2变化检测似乎不起作用（RC5）

1 个答案: