Javascript 如何推送数据并检测角度2+；版本

在以前的angular版本中，我们有$scope.apply来检测更改，所以我在下面的代码中我有来自detailService的数据，现在我正在将数据推送到对象。它的抛出错误对象属性未定义。在新的angular版本中，将数据推送到数组并将其绑定到dom的正确方法是什么

app.component.ts

  import { Component, OnInit,Pipe, PipeTransform, EventEmitter, Output } from '@angular/core';
import { DetailService } from '../detail.service';
import { StreamService } from '../stream.service';
import { MatTableDataSource } from '@angular/material';
import {GtConfig} from '@angular-generic-table/core';
import { GenericTableComponent} from '@angular-generic-table/core';
import * as io from 'socket.io-client';


export interface Element {
        ticketNum: number;
        ticketOpened: number;
        eventType: string;
        riskIndex: string;
        riskValue: number;
        severity: string;
        lastModifiedDate: number;
        assetID: string;
    }
    @Component({
      selector: 'app-detail',
      templateUrl: './detail.component.html',
      styleUrls: ['./detail.component.css'],

    })
export class DetailComponent{
  messageArray: any[];
    message1:Object = {};
   public secondConfigObject: GtConfig<any>;

    constructor(private detailService: DetailService) {
        this.secondConfigObject = {
            settings: this.getBaseSettings(),
            fields: this.getBaseFields(),
            data: []
        };
    };

    ngOnInit() {
        this.detailService.currentMessage1.subscribe(message1 => {
            console.log('eventINDetailComp',message1);
            this.secondConfigObject.data.push(message1);
        });
    }

}

import{Component，OnInit，Pipe，PipeTransform，EventEmitter，Output}来自“@angular/core”；
从“../detail.service”导入{DetailService}；
从“../stream.service”导入{StreamService}；
从“@angular/material”导入{MatTableDataSource}；
从“@angular generic table/core”导入{GtConfig}；
从'@angular generic table/core'导入{GenericTableComponent}；
从“socket.io客户端”导入*作为io；
导出接口元素{
票号：编号；
票号：编号；
eventType:string；
风险指数：字符串；
风险值：数字；
严重性：字符串；
lastModifiedDate：编号；
assetID：字符串；
}
@组成部分({
选择器：“应用程序详细信息”，
templateUrl:'./detail.component.html'，
样式URL:['./detail.component.css']，
})
导出类DetailComponent{
messageArray:any[]；
message1:Object={}；
public secondConfigObject:GtConfig；
构造函数（私有detailService:detailService）{
this.secondConfigObject={
设置：this.getBaseSettings（），
字段：this.getBaseFields（），
数据：[]
};
};
恩戈尼尼特（）{
this.detailService.currentMessage1.subscribe（message1=>{
console.log（'eventINDetailComp'，message1）；
this.secondConfigObject.data.push（message1）；
});
}
}

app.component.html

<div class="table-responsive">
    <generic-table [gtClasses]="'table-hover'" #myCustomTable [gtSettings]="secondConfigObject.settings" [gtFields]="secondConfigObject.fields" [gtData]="secondConfigObject.data"></generic-table>
</div>

---

您应该将代码从构造函数移动到

ngOnInit（）

函数的开头，以便在创建页面后设置数据，而不是在创建过程中设置数据

---

对于数据绑定，屏幕/html上的变量在代码隐藏中更改时将自动更新

是否使用

ChangeDetectionStrategy.OnPush

？如果是这样，您可以尝试删除该选项。否则，您将找到一些方法来强制在中检测更改。@ConnorsFan更改在angular 2+@mast3rd3mon中自动检测-不总是这样，尤其是在使用时。@ConnorsFan除非在angular范围外运行某些操作，否则它总是这样做，这就是使用angularjs的好处frameworks@mast3rd3mon-我邀请您查看中所示的案例。它在

message1处抛出错误。如果我将代码移到
ngOnInit
中，则prop

是未定义的，我不确定调用它的原因，这是行单击事件，只有当我们从详细信息服务传递数据时，它才应该调用。您在哪里使用message1.prop？我在你的代码中看不到它？我只是给你举个例子，所以在subscribe中我有一个message1，它是来自service的对象，现在它的属性没有定义，因为在应用程序启动时调用this.detailService.currentMessage1，如果你将subscribe放在ngOnInit中，然后应该在启动应用程序时调用它，但我在表中单击行时传递事件，在这种情况下正确的方法是什么，基本上是将数据对象从一个表传递到另一个表