Angular 无法通过ChangeDetection.onPush策略刷新/重新加载角度视图

我试图在数据更改时更新角度组件的视图。我正在进行

ChangeDetectionStrategy.OnPush

，并认为这可能会解决我的问题。然而，我没有成功

我有一个即将到来的研究部分，这是研究部分的子部分

com-studies.component.html

第一次在nit（）上调用

HTTP

时，下一次调用

comingstudies component.ts的
getUpcomingStudies（）。执行
HTTP
调用，并返回更新的数据，更新
temp
和
rows
变量，但UI上的行数不变。基本上，它减少了即将到来的研究视图中的行数，因此我需要更新该视图，使其显示的行数减少1行。正如您所看到的，我尝试过使用
ChangeDetectionStrategy
，但我不确定如何使这件事起作用。如有任何意见，将不胜感激。谢谢

更新1：我想，@Input（）变量没有更新，因此没有变化检测，因为我尝试在ngOnChanges中打印它们，但ngOnChanges从未执行过。是否有其他方法执行相同的操作

更新2:
我对
行
和
temp
的更新方式做了一些更改。正如我前面提到的，即将到来的研究组件是研究组件的一个子组件。我正在将研究中的行和temp传递给即将到来的研究组件，如下所示：

http://www.component.html

ngOnInit in studies组件首次调用
getUpcomingStudies
方法。在此之后，它将从另一个组件调用。如果你需要更多的细节，请告诉我

util_to_cal_time-它只是修改时间并返回相同的数组

util_to_cal_time（研究：数组）{
用于（每项研究的常数）{
const sDate=新日期（每个开始日期*1000）；
each.start_date=sDate.getUTCMonth（）+1+'/'+sDate.getUTCDate（）++'/'+sDate.getFullYear（）；
const-eDate=新日期（每一个结束日期*1000）；
each.end_date=eDate.getUTCMonth（）+1+'/'+eDate.getUTCDate（）++'/'+eDate.getFullYear（）；
}
控制台日志（研究）；
回归研究；
}
我能够解决这个问题。ChangeDetection没有问题（在我的案例中甚至不需要）。在我上面的帖子中，我在后面说
，它是从另一个组件调用的。如果需要更多详细信息，请告诉我。
，问题在于我调用组件方法的方式。我使用
new
关键字创建该组件的对象，以便调用
getUpomingStudies
方法，每次都给我一个新的组件实例。难怪，我的旧组件从未看到变化。这真是一个愚蠢的错误，但这让我读了很多关于
ChangeDetectionStrategy
。感谢大家的投入
 解决方案是触发阵列本身的更改检测。因此，一旦填充完“rows”和“columns”组件变量，只需添加以下两行代码

this.rows = [...this.rows];
this.columns = [...this.columns];

Angular在重画屏幕时不执行对象和阵列的深度差异。这意味着，如果数组中的某个对象被修改，那么Angular将不会更明智。每次更新
行
属性时，可以尝试为其分配一个全新的引用（克隆数组）。例如
this.rows=JSON.parse（JSON.stringify（this.rows））
或者如果您使用的是Lodash:
this.rows=\uuuu.cloneDeep（this.rows）
。如果这行得通的话，那至少会证实你的问题。你找到答案了吗？没有。还没有@Maximus。。。我发现
ngochanges
仅第一次检测到
行
和
temp
变量的变化。。然后，正如@Graztok所指出的，这些数组中的任何其他变化都不会被检测到。因此，我无法运行ChangeDetection。您对此有什么意见吗？如何更新
行
，显示一些code@Maximus-我添加了更新2，这将使事情更加清楚。如果您需要任何其他信息，请告诉我。
        @Component({
        selector: 'rmis-upcomingstudies',
        templateUrl: './upcoming-studies.component.html',
        changeDetection: ChangeDetectionStrategy.OnPush,
        styleUrls: ['./upcoming-studies.component.css']
    })
    export class UpcomingStudiesComponent implements OnInit, OnChanges {

        // ToDo: Check specific data types
        @Input() rows = [];
        @Input() temp = [];
     constructor(private studiesService: StudiesService,
                    private exceptionService: ExceptionService,
                    private cd: ChangeDetectorRef) {
            // Set up the column labels and properties for the upcoming study table
            this.columns = [
                {prop: 'protocol_number', name: 'Protocol Number', flexGrow: 1},
                {prop: 'start_date', name: 'Start Date', flexGrow: 1},
                {prop: 'end_date', name: 'End Date', flexGrow: 1},
                {prop: 'patient_count', name: 'Patient Count', flexGrow: 1},
                {prop: 'trial_country', name: 'Country', flexGrow: 1},
            ];
        }

        ngOnInit() {
            this.getUpcomingStudies();
        }
        ngOnChanges() {
        //Trying to print the `rows` and `temp` to see if changes in these variable are detected. so that I can run cd.detectChangese() method to update the view.
}

  <upcoming-studies [rows] = rows [temp] = temp>
    </upcoming-studies>

public rows = [];
public temp = [];
ngOnInit() {
    this.getUpcomingStudies();
}
    getUpcomingStudies() {
    this.studiesService
        .getUpComingStudies()
        .subscribe(
            // the first argument is a function which runs on success
            (data) => {
                console.log('Data from backend-upcoming', data);
                this.temp = data['records'];
                // this.temp = JSON.parse(JSON.stringify(this.temp));
                this.rows = this.studiesService.util_to_cal_time(data['records']);
                // this.rows = JSON.parse(JSON.stringify(this.rows));
                // this.rows = data.records;

            },
            // the second argument is a function which runs on error
            (err: HttpErrorResponse) => {
                this.exceptionService.errorResponse(err);
            },
            // the third argument is a function which runs on completion
            () => {
            }
        );
}

util_to_cal_time(studies: Array<any>) {
        for (const each of studies) {
            const sDate = new Date(each.start_date * 1000);
            each.start_date = sDate.getUTCMonth() + 1 + '/' + sDate.getUTCDate() + '/' + sDate.getFullYear();
            const eDate = new Date(each.end_date * 1000);
            each.end_date = eDate.getUTCMonth() + 1 + '/' + eDate.getUTCDate() + '/' + eDate.getFullYear();
        }
        console.log(studies);
        return studies;
    }

this.rows = [...this.rows];
this.columns = [...this.columns];