1

在我的 ng2 模块中，另一个模块调用一个函数来创建一个对象并将其推送到一个绑定到模板中 *ngFor 的数组。根据文档https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html它应该自动检测更改。我可以控制台记录数组，一切都在那里，但选择器标记保持为空。如果我使用静态数组作为测试它可以工作。我在这里和其他网站上查看了所有看似相似的问题以及文档中的 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);

  }
}

静态写入的“令牌”按预期显示和工作，但没有新添加。

4

1 回答 1

0

感谢@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>
  `
})
于 2016-09-04T08:59:59.897 回答