订阅返回未定义答案

【问题标题】：Subscribe returning Undefined订阅返回未定义
【发布时间】：2018-09-06 20:21:53
【问题描述】：

我是 Angular 世界的新手。我有一个简单的应用程序，只需查询数据库，然后在表中显示数据。这是运行查询的服务代码 (db.service.ts)：

query(): Observable<printerResults[]>{
return this.http.get<printerResults[]>(this.dataURL);
};

来自我的组件的调用 (Printer-component.ts:

results: printerResults[];

ngOnInit() {
this.getData();
};

getData(): void {

this.TestService.query()
.subscribe((res: printerResults[]) => {this.results = res}, err => 
console.log("error"));
}

还有我的班级声明（Results.ts）：

export class printerResults {
 Cell: string;
 Plant: string;
 PrinterDPI: number;
 PrinterName: string;
 PrinterType: string;
}

如果我将 console.log 放入订阅中，例如：

    .subscribe(res => console.log(res), err => 
    console.log("error"));

它显示了完整的对象。但是当我尝试在 html 端使用它时，我得到 [object Object]。任何帮助将不胜感激。

【问题讨论】：

您必须打印res object 的每个属性。尝试执行this.res = res，然后在您的模板中执行以下操作{{res | json}}
你的 api 和你的模型的变量名一样吗？

标签： angular

【解决方案1】：

解析管道中的 json，因此订阅将有一个对象进入，而不是 json 字符串。

results: printerResults[];

ngOnInit() {
this.getData();
};

getData(): void {

this.TestService.query()
.map( _res => JSON.parse(_res) )
.map( _res => _res.map( _raw => PrinterResults.initFromJsonRaw( _raw ) ) )
.subscribe((res: printerResults[]) => {this.results = res}, err => 
console.log("error"));
}

打印机结果

class PrinterResults...
    public static initFromJsonRaw(_object) : PrinterResults {
            let ret = new PrinterResults();

            ret.PrinterName = _object.name;
            ret.PrinterDPI  = _object.dpi;

            return ret;
    }
}

然后在模板中，只对结果数据进行插值。 ngFor 循环它，因为它似乎是你代码中的一个数组。

.html

<ng-container *ngFor="let result of results">
    <p>Name: {{ result.PrinterName }}</p>
    <p>DPI: {{ result.PrinterDPI }}</p>
</ng-container>

【讨论】：

我收到错误，我无法将类型 printerResults[] 分配给 _res 处的字符串。理想情况下，我想将http.get 的结果读入上面定义的printerResults 类型的数组。然后订阅会将Observable Array 的结果放入数组result，它也是printerResults 类型。但是阵列似乎没有连接。或者，也许我误解了数据流。最终目标是使用ngFor 将数据循环到表中。
我添加到我的答案中。基本上，您还必须将 json 解析数据映射到 PrinterResults[] 类型。我通常在我的模型（PrinterResults 模型）上使用静态 initFromJsonRaw 函数。

【解决方案2】：

可能是您的 api 和您的模型（Results.ts）具有不同的变量名称，因此模型未绑定....

  this.TestService.query()
   .subscribe((res: printerResults[]) =>{
          for (let i = 0; i < res.length; i++) {
            this.results.push(new printerResults(res[i]));
        }
     });

尝试这种方式来获取结果变量中的值。

【讨论】：