javascript - 当Api返回数据时，数据无法以 Angular 方式设置在Object的数据类型中

Question

我有一个像这样的普通输入字段:

当我单击“+”按钮时，会发生此操作并调用服务类，因为我有简单的 Json 数据到达。我想分配 selectionCustomOffice.custOfficeName=json data's.custOffcName;但我得到了未定义结果。

addedO(selectionCustomOffice:SelectionCustomOffice){
     this.scoe=true;

   this.selectionCustomOfficeService.getSingleCustomOffice(selectionCustomOffice.customOfficeId).subscribe((data)=>{
        console.log("entered");

         selectionCustomOffice.custOfficeName=data.custOffcName;
         console.log( selectionCustomOffice.custOfficeName);
          },(error)=>{
         console.log(error);
       });

 this.empList.push(selectionCustomOffice);
 this.selectionCustomOffice=new SelectionCustomOffice();

 console.log(this.empList);
}



this.selectionCustomOfficeService.getSingleCustomOffice(selectionCustomOffice.customOfficeId).subscribe((data)=>{
        console.log("entered");

         selectionCustomOffice.custOfficeName=data.custOffcName;
         console.log( selectionCustomOffice.custOfficeName);
          },(error)=>{
         console.log(error);
       });

SelectionCustomOffice.ts

export class SelectionCustomOffice {
    id: number;
    fromDate: string;
    toDate: string;
    consignmentNo: number;
    selectionId: number;
    customOfficeId: number;
    custOfficeName: string;

}

发送数据的形式是:我已使用此字段自定义办公室作为选择字段。

<div class="form-group row">
   <div class="col-md-4">
      <label>Custom Office</label>
   </div>
   <div class="col-md-2">
      <label>From Date</label>
   </div>
   <div class="col-md-2">
      <label>To Date</label>
   </div>
   <div class="col-md-4">Consignment No</div>
   <div class="col-md-4">
      <select class="form-control" id="customOfficeId" required [(ngModel)]="selectionCustomOffice.customOfficeId" name="customOfficeId"
      >
      <option *ngFor="let title of customoffices" [value]="title.custOfficeId">{{title.custOffcName}}</option>
      </select>
   </div>
   <div class="col-md-2">
      <input type="date" class="form-control" id="fromDate" required [(ngModel)]="selectionCustomOffice.fromDate" name="fromDate" />
   </div>
   <div class="col-md-2">
      <input type="date" class="form-control" id="toDate" required [(ngModel)]="selectionCustomOffice.toDate" name="toDate" />
   </div>
   <div class="col-md-3">
      <input type="number" class="form-control" id="consignmentNo" required [(ngModel)]="selectionCustomOffice.consignmentNo" name="consignmentNo">
   </div>
   <div class="col-md-1">
      <button type="button" (click)="addedO(selectionCustomOffice)">+</button>
   </div>
</div>

服务等级

getSingleCustomOffice(id: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/${id}`, { responseType: 'text' });
  }

Answer 1

我认为您遇到了一个小问题 - 您正在将您的回复视为文本

getSingleCustomOffice(id: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/${id}`, { responseType: 'text' });
  }

从 http 调用中删除 { responseType: 'text' } 或在读取数据时使用 JSON.parse(data) - { responseType: 'text' } 这会将您的响应返回为 string

如果您希望您的回复为文本，请尝试这样做

this.selectionCustomOfficeService.getSingleCustomOffice(selectionCustomOffice.customOfficeId).subscribe((data)=>{
        console.log("entered");
         let outPut = JSON.parse(data);
         selectionCustomOffice.custOfficeName=outPut.custOffcName;
         console.log( selectionCustomOffice.custOfficeName);
          },(error)=>{
         console.log(error);
       });

我认为这可能会解决您的问题 - 快乐编码!!