从静止插入对象 API

Question

你好，我在如何从 rest API 插入对象时遇到了问题，我可以在控制台日志中看到这些对象，但我无法将它绑定到我的 table 的标签中

这是我要在 table

中插入的对象

店员：名称：“梅安妮” [[原型]]：对象

这是我的service.ts

//fetch discounte Bill
  fetchDiscountedBill(): Observable<any>{
    return this.http.get(this.baseUrl + '/discountedBill');
  }

这是model.ts

 export class BillingModel{
        clerk : {
            name: string;
        }
    }

我用这个

把model.ts叫到我的table.component.ts

billingModel: BillingModel = {
      clerk: {
        name: ''
      }
    };

并用这个

创建一个方法

 getDiscountedBill(){
        this.dataStorageService.fetchDiscountedBill().subscribe(resp => {
          console.log(resp)
          this.billingModel = data;;
        }, err => {
          console.log(err)
        });
      }

这是我要插入或绑定对象的标签

<tr>
        <td colspan="4">Attending Clerk: </td>
    </tr>

请帮忙谢谢！

Answer 1

我认为你可以在组件方法中使用 this.BillingModel.clerk = resp.clerk

Answer 2

在订阅内的 ts 文件中，您可以将值分配为：

this.billingModel.clerk = resp.clerk;

然后使用 interpolation 在您的 html 模板中显示职员姓名：

{{billingModel?.clerk?.name}}

如果您的 HTTP 响应数据结构与您定义的模型相匹配，那么您可以在您的服务 class 方法中使用相同的类型：

fetchDiscountedBill(): Observable<BillingModel> {
    return this.http.get<BillingModel>(this.baseUrl + '/discountedBill');
}

在订阅中你可以简单地做：

this.billingModel = resp;

另外在定义你的模型时，你不需要将它定义为一个class，但可以将它定义为一个接口：

export interface BillingModel {
    clerk: {
        name: string;
    }
}

Answer 3

我也有相同的问题数据显示在控制台中但未显示在 table

并且有人认为控制台中显示的数组名称是什么，名称在 ts 中写入，就像 res['name of array']

试试这个

 getDiscountedBill(){
        this.dataStorageService.fetchDiscountedBill().subscribe(resp => {
          console.log(resp)
          this.billingModel = res['orderList']; <==  not work then try below  ;
          this.billingModel = res['clerk']; <== this will work 
          this.billingModel = res['clerk'].name; <== if you want to display name of clerk then try this

        }, err => {
          console.log(err)
        });
  }

从静止插入对象 API

Interpolate an object from rest API

mysql

angular

rest

spring-data-jpa

string-interpolation