Question

我正在尝试将简单的json绑定到我的html表，如下所示：

<tbody *ngIf="arrData?.length > 0">
      <tr *ngFor="let d of arrData" ng-style="{'background-color': 'red'}">
        <td>
          {{d.Name}}
        </td>     
        <td>
          {{d.Status}}
        </td>       
      </tr>
    </tbody>

以下是我的组件：

  ngOnInit () {
    this.appService.getAllData().subscribe((data: any[]) => {
      this.arrData = data;   
    });
  }

以下是我的服务：

 getAllData(): Observable<{} | any[]> {   
    return this.httpClient.get('/assets/data.json');
  }

我在控制台中收到错误：

ERROR
▶HttpErrorResponse {headers: {…}, status: 200, statusText: "OK", url: "https://angular-pkjqkh.stackblitz.io/assets/data.json"…}
▶error: Object
▶headers: HttpHeaders
 message: "Http failure during parsing for https://angular-pkjqkh.stackblitz.io/assets/data.json"
 name: "HttpErrorResponse"

下面是我的stackblitz演示：

https://stackblitz.com/edit/angular-pkjqkh

Answer 1

将Dim xlApp as New Excel.Application移到 src 中 app 文件夹级别的名为data.json的文件夹。

Answer 2

我认为这可以为您提供帮助：

html

 <table class="table table-hover table-responsive fixed-header table-striped">
 <thead>
  <tr>
    <th>Name</th>
    <th>Status</th>         
 </thead> 
 <tbody>
  <tr *ngFor="let d of arrData | async" ng-style="{'background-color': 'red'}">
    <td>
      {{d.Name}}
    </td>     
    <td>
      {{d.Status}}
    </td>       
  </tr>
  </tbody>
</table>

app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpErrorResponse } from '@angular/common/http';
import { AppService } from './app.service';
import { Observable } from 'rxjs'

@Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
   name = 'Angular';
   arrData: Observable<any>;

   constructor (private appService: AppService) { }

   ngOnInit () {
     this.arrData = this.appService.getAllData();
   }
}

这将有助于解决您的问题，该解决方案基于您的https://stackblitz.com/edit/angular-pkjqkh。编码愉快！

将json绑定到表期间出现角度错误

2 个答案: