Question

在我的打字稿文件中，我有一个这样的代码：

searchByID(_byid: ByID) {
    // new instance of the Order model
    this.order = new Order();
    this._httpService.post(this.apiBaseURL + this.api + '/SolicitudSugerido/ByIdMst', _byid)
    .subscribe(
        data => {
            this.productsResultArray = data,
            this.order.fechahora = this.productsResultArray.fechahora;
            this.order.idsestatus = this.productsResultArray.idsestatus;
            this.order.idestatu = this.productsResultArray.idestatu;
            this.order.abc = this.productsResultArray.abc;
            this.order.guardar = this.productsResultArray.guardar;
            //console.log(this.productsResultArray);
        }
    )
}

我还有其他组件：

import { SolicitudComponent } from "./../solicitud/solicitud.component";

然后我在同一个组件中使用了这个方法：

showSolicitudFormWithData() {
    this.sugerido = this._solicitud.order;
    this.fecha = this._solicitud.order.fechahora;
    console.log(this.sugerido);
}

所以问题是this.fecha当我试图在控制台上看到它的值时，它说未定义，但是..sugerido打印出来：

订单{} abc：是的， fechahora：＆＃34;＆＃34;， guardar：false， idestatu：＆＃34; 1＆＃34;

所以我想知道的是如何在我的html组件中打印这些值，我尝试过：{{fecha}}，但它不打印该值。

我想在我的视图和我的ts文件中访问该对象。例如，为了在另一个对象中获取该响应，我可以逐个迭代其属性。像：

this.order = this._solicitud.order;
this.order.fechahora = this._solicitud.order.fechahora;
this.order.idsestatus = this._solicitud.order.idsestatus;

稍后如果我想访问一个属性或将其用作另一个api调用的参数。

Answer 1

通过DI（在构造函数中）添加组件然后获取值不是推荐的解决方案。您不知道何时返回该值。为了给出更好的答案，需要更多的结构或理解代码。

如果在同一屏幕上有多个组件，则可以使用事件并设置容器组件，以处理组件中的这些事件。看看以下内容以获得理解： https://blog.angular-university.io/angular-2-smart-components-vs-presentation-components-whats-the-difference-when-to-use-each-and-why/

第二种情况是，如果一个组件尝试传递另一个组件想要在另一个路由上订阅的值。在这种情况下，您可能希望使用本地存储来存储值，第二个组件对该值具有可观察的设置。因此，每当发生变化时，它都会被渲染。以下链接将在该场景中有所帮助： How to pass data from one component to other in angular 2

然而，理想的解决方案是使用应用程序状态。有一个名为ngrx for Angular的模块，基本上就是Redux的实现。阅读以下链接以了解：

https://angular-2-training-book.rangle.io/handout/state-management/ngrx/

Answer 2

由于您说this.sugerido提取了服务的价值，因此在设置数据和使用this.fecha读取数据之间可能存在同步问题。你可以直接在你的html模板中使用elvis运算符，它将等到检索到值之后再显示它。

在您的html模板中尝试此操作：{{sugerido?.fechahora}}而不是{{fecha}}。

如果要访问服务器中的数据提取，可以按以下方式进行：

searchByID(_byid: ByID) { // call the service
    this._httpService.post(this.apiBaseURL + this.api + '/SolicitudSugerido/ByIdMst', _byid)
      .subscribe(data => {
          this.productsResultArray = data;
          // if you want to use this data elsewhere in the component, you can call a function with data as argument
          this.anotherFunction(data)
        },
        error => {
          return <any>error
        });
  }

  anotherFunction(data: any) {
    //process the data send from the server here.
    console.log(data);
  }

Angular 4从类中获取属性

2 个答案: