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

Question

当我要将数据绑定到全局变量时,我正在尝试从WebApi和Getting 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)服务代码返回一个可观察的.

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 }}

这可确保绑定仅导航到pbif 的TargetBagQty属性pb具有值.

此外,您需要包含在订阅中检索数据后要执行的所有代码...所以像这样:

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

}