Question

使用Angular 5，我将选定的对象属性ID传递给另一个触发Web请求的组件中的函数getqr()。即使正确记录了请求及其结果，结果也不会显示在保持其原始状态的视图中。如何让显示结果的组件反映出选择？

用于选择的HTML：

<table>
  <tr>
    <th></th>
    <th>Document Group</th>
    <th>Title</th>
    <th>Description</th>
  </tr>

  <tr *ngFor="let doc of docs">
    <td><input type="checkbox" [(ngModel)]="doc.selected" (change)="select(doc.ID, doc.selected)"></td>
    <td>{{doc.DocumentGroup}}</td>
    <td>{{doc.Title}}</td>
    <td>{{doc.Description}}</td>
  </tr>
</table>

<app-print></app-print>

TS供选择：

  select(ID, selected){
    if (selected == true) {
      this.print.selecteditems.push(ID);
    }
    else {
      var index = this.print.selecteditems.indexOf(ID);
      this.print.selecteditems.splice(index, 1);
    }
    this.print.getqr(ID); //FIRES FUNCTION FROM PRINT COMPONENT
  }

我要在getqr()触发时刷新的“打印”视图的HTML：

<div *ngFor="let item of barcodeitems" id="pagebreak">
  <div class="qrcode">
    <qrcode [qrdata]="item.Title" [size]="256" [level]="'M'"></qrcode>
  </div>

  <div class="qrinfo">
    {{item.DocumentGroup}}<br>
    <b>{{item.Title}}</b><br>
    {{item.Description}}
  </div>
</div>

打印组件的TS：

  getqr(ID) {
    let filterQuery = this.selecteditems.map(i => `ID eq '${i}'`).join(" or ");
    let url = `example.com/dev/_api/web/lists/getbytitle('Document Separator Barcodes')/items?$top=1000&$orderBy=ID&$filter=${filterQuery}`
    this.http.get(url).subscribe(data => {
      console.log("data.value", data['value']); //Results log here correctly
      this.barcodeitems = data['value'];
    });
  }

如何在getqr()完成后刷新打印组件的视图？

Answer 1

在要触发更新的组件内（手动触发或标记角度变化检测），您可以使用ChangeDetectorRef.markForCheck()或ChangeDetectorRef.detectChanges()。

e.g。

import { Component,  ... , ChangeDetectorRef } from '@angular/core';

@Component({
    ...
})
export class PrintComponent implements OnInit {
    constructor(private cdr: ChangeDetectorRef, // Inject ChangeDetectorRef                  
                ...) {
    }

    getqr(ID)
    {
        let filterQuery = this.selecteditems.map(i => `ID eq '${i}'`).join(" or ");
        let url = `https://portal.oldnational.com/corporate/portalsupport/_api/web/lists/getbytitle('Document Separator Barcodes')/items?$top=1000&$orderBy=ID&$filter=${filterQuery}`
        this.http.get(url).subscribe(data => {
            console.log("data.value", data['value']); //Results log here correctly
            this.barcodeitems = data['value'];

            // After assignment, trigger change detection
            this.cdr.detectChanges();
        });
    }
}

注意更喜欢ChangeDetectorRef.markForCheck()，如果它适合您。 Reference

Web请求触发后更新视图？

1 个答案: