Question

我是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]。任何帮助将不胜感激。

Answer 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"));
}

PrinterResults

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>

Answer 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]));
        }
     });

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

订阅返回未定义

2 个答案: