Question

当我要将数据绑定到全局变量时，我试图从WebApi和Get Undfind获取数据。

这是我的订阅

    export class OverallSummaryGaugeComponent implements OnInit {

  gaugeVal: any;
  bfd;
  pb: ProductionBreakDown[];
  gaugeSummaryType: String;
  constructor(private _sampleDataService: SampleDataObjectService, private _dashboard: DashboardService) { }
  customizeText(arg) {
    return arg.valueText + ' %';
  }

  ngOnInit() {
    this.gaugeVal = this._sampleDataService.CompletedPrasantage;
    this.getallData();
  }
  getallData() {
    this._dashboard.getProductionBreakDownByDate()
    .subscribe(pb => this.pb = pb
    );
    console.log(this.pb);
  }
}

当我改变代码时，就像它的打印数据一样。

this._dashboard.getProductionBreakDownByDate()
          .subscribe(pb => console.log(pb)
          );
          console.log(this.bd);
      }

但是我试图将它绑定到获取未定义的相同类型的列表。

这是我的Observable代码

    @Injectable()
export class DashboardService extends BaseService {
    private _getProductionBreakDown = UrlsConfig.ptsapi + 'productionBreakDown/filterByDate/2018-12-17';
    constructor(private _dataAccessService: DataAccessService) {
        super(_dataAccessService);
    }
    // getting ProductionBreakDown Data
    getProductionBreakDownByDate(): Observable<ProductionBreakDown[]> {
        return this._dataAccessService.get<ProductionBreakDown[]>(this._getProductionBreakDown);
    }

}

这是模型类

export class ProductionBreakDown {
    TotalTargetQty: number;
    TotalCompletedQty: number;
    BreakdownTypeId: number;
    ProductionScheduleId: number;
    BreakdownType: number;
    ProductionSchedule: any;
    TargetBagQty: number;
    TargetPOQty: number;
    CompletedPOQty: number;
    CompletedBagQty: number;
    CompletedBoxQty: number;
    ProductionDate: any;
    HourlyProductionBreakdowns: any;
    IsDeleted: any;
    Id: number;
    OwnerId: any;
}

Answer 1

使用Http检索数据是一种异步操作。所以它是这样的：

1）ngOnInit调用服务，该服务向服务器发送get请求。

2）服务代码返回一个observable。

3）执行组件中订阅后的任何代码。

此步骤表示在步骤＃5中返回数据之前，您的console.log已执行

getallData() { this._dashboard.getProductionBreakDownByDate() .subscribe(pb => this.pb = pb // <-- Not executed until step #6 ); console.log(this.pb); // <-- executed as part of step #3, so undefined }

4）UI显示。注意：此时，您的pb变量尚未设置。

5）稍后，服务器返回响应。

6）执行传递给subscribe方法的第一个函数中的代码。此时，您的pb变量已设置。

7）Angular的变化检测选择现在设置pb变量并重新绑定UI。

由于步骤＃4，您需要在UI（在HTML中）中添加处理undefined的代码，直到它重新绑定到第7步。

通常采用以下两种方式之一：

选项1：

在顶部元素中的某处添加*ngIf='pb'。这将阻止UI在设置pb属性之前尝试显示。

或

选项2：

在引用pb属性的属性的任何元素上使用安全导航操作符。

例如，要绑定到TargetBagQty属性：

{{ pb?.TargetBagQty }}

如果pb有值，则确保绑定仅导航到pb的TargetBagQty属性。
此外，在订阅中检索数据之后，您需要包含要执行的所有代码...就像这样：

getallData() { this._dashboard.getProductionBreakDownByDate() .subscribe(pb => { this.pb = pb; console.log(this.pb); //<-- both lines are now within the subscribe function });

}

在订阅Angular 5中绑定一个对象

1 个答案: