来自Web API的数据未绑定到Angular中的视图

时间:2019-04-08 10:27:20

标签: angular

我有一些来自Web api的数据,但是由于某种原因数据未绑定到视图,我为api调用提供了服务,然后将其注入component.ts文件和html,到目前为止,我有:

Web api结构(其余)在控制台中显示

result: Array(1)
0:
active: "true"
activity_due: ""
additional_assignee_list: ""
approval: "not requested"
approval_history: "
etc etc

service.ts

getIncident(s_id, cId): Observable<any> {
    return this.http.get<any>(this.incidentApiUrl + "/" + s_id + "?customer_id=" + cId)
       .pipe(
         catchError(this.handleError)
       );
   }

componet.ts:

constructor(private service: nowService,
        private appComponent: AppComponent,
        private userService: UserService,
        private router: Router,
        private http: HttpClient,
        private route: ActivatedRoute
      ) {
        this.receivedUser = { firstname: '', email: '', lastname: '', name: '' }
        this.receivedIncident = { number: '', opened_at: '', description: '', short_description: ''}; this.receivedLocation = {city:null, country: null}
      }

      private getIncident() {
        this.service.getIncident(this.s_id, this.customer_id).subscribe((data) => {
          this.loading = true;
          console.log('Result - ', data);
          console.log('incident data is received');
          this.loading = true;
          this.receivedIncident = data.result;
          //this.service.getLocationsCustomer(this.receivedIncident.location.value).subscribe(location => {
            if (this.receivedIncident.location) {
              this.service.getLocations(this.receivedIncident.location.value).subscribe(location => {  
                  console.log('location --', location)

                  this.loading = false;
                  this.receivedLocation  = location.result;
              });
            } else {
              this.loading = false;
            }
        })
      }

html.binding。

<h2 class="text-secondary">Incident #{{receivedIncident.number}}</h2>

可能与Web API中的数据结构有关??有什么想法吗?

1 个答案:

答案 0 :(得分:1)

您必须按照json结果结构编写如下内容。

this.receivedIncident = data.result[0];

 this.receivedIncident = data[0];

在getIncident()函数中,因为我在数组中看到了具有所有属性的结果。