Question

我无法使用Angular将数据绑定到表。

下面是我的html组件

<tr *ngFor="let objscan of scanList">

            <td>{{ objscan.ContainerID }}</td>
            <td>{{ objscan.ContainerNo}}</td>
            <td>{{ objscan.Size}}</td>
            <td>{{ objscan.Type}}</td>
            <td>{{ objscan.ScanningType}}</td>
 </tr>

组件打字稿

scanList: any = []; 
    constructor(public http: Http, private _router: Router, private _scanService: ScanService) {
        this.getScannedList();
    }

    getScannedList() {
        this._scanService.getScannedList().subscribe(
            data => {
                this.scanList = data;

           },
            err => console.error(err),
            () => console.log(this.scanList)
        );
    }

在scanList中，我正在控制台中获取数组。请检查下图

服务类型脚本

export class ScanService {
    myAppUrl: string = "";

    constructor(private _http: Http, @Inject('BASE_URL') baseUrl: string) {
        this.myAppUrl = baseUrl;
    }

    getScannedList() {
        return this._http.get(this.myAppUrl + 'api/ScanningList/Index')
            .map((response: Response) => response.json())
            .catch(this.errorHandler);
    }
}

响应有效载荷

[{"containerID":3,"containerNo":"MSCU1234567","igmNo":null,"size":"20","type":"GP","isoCode":null,"cfsCode":null,"scanningType":"Fixed","scanningDateTime":null,"scanningResult":null,"customScannerRemark":null,"cfsCustomRemark":null,"scannerLocation":null,"isScanningDone":0,"scannerCustom_ID":0,"cfsCustom_ID":0,"createdDt":"0001-01-01T00:00:00","updatedDt":"0001-01-01T00:00:00","terminalName":null,"vesselName":null,"voyageNo":null,"cargoDecription":null,"consigneeName":null,"scanImage1":null,"scanImage2":null,"scanImage3":null,"scanImage4":null,"scanImage5":null,"scanImage6":null,"cgoImage":null}]

Answer 1

[{"containerID":3,"containerNo":"MSCU1234567","igmNo":null,"size":"20","type":"GP","isoCode":null,"cfsCode":null,"scanningType":"Fixed","scanningDateTime":null,"scanningResult":null,"customScannerRemark":null,"cfsCustomRemark":null,"scannerLocation":null,"isScanningDone":0,"scannerCustom_ID":0,"cfsCustom_ID":0,"createdDt":"0001-01-01T00:00:00","updatedDt":"0001-01-01T00:00:00","terminalName":null,"vesselName":null,"voyageNo":null,"cargoDecription":null,"consigneeName":null,"scanImage1":null,"scanImage2":null,"scanImage3":null,"scanImage4":null,"scanImage5":null,"scanImage6":null,"cgoImage":null}]

您正在扫描列表中获取此信息，因此存在愚蠢的错字错误。

在html中这样做。

<tr *ngFor="let objscan of scanList">

            <td>{{ objscan.containerID }}</td>
            <td>{{ objscan.containerNo}}</td>
            <td>{{ objscan.size}}</td>
            <td>{{ objscan.type}}</td>
            <td>{{ objscan.scanningType}}</td>
 </tr>

Answer 2

角度代码看起来不错我认为您从getScannedList返回的数组格式错误

数组必须采用这种格式

scanList = [
  {ContainerID:"id1", ContainerNo:"ContainerNo1",Size:"size1", Type:"type1", ScanningType:"scanningType1"},
  {ContainerID:"id2", ContainerNo:"ContainerNo2",Size:"size2", Type:"type2", ScanningType:"scanningType2"},
  {ContainerID:"id3", ContainerNo:"ContainerNo3",Size:"size3", Type:"type3", ScanningType:"scanningType3"}
];

或者只是尝试下面的代码（从data [0]设置this.scanList）

    getScannedList() {
        this._scanService.getScannedList().subscribe(
            data => {
                this.scanList = data[0];

           },
            err => console.error(err),
            () => console.log(this.scanList)
        );
    }

Answer 3

我认为在渲染模板之后，您的HTTP请求已完成。尝试使用异步管道和* ngIf等待它完成，然后再呈现表。

因此，请从您的服务中返回尚未完成的观察值：

public scanList$; 
constructor(public http: Http, private _router: Router, private _scanService: ScanService) {
    this.getScannedList();
}

getScannedList() {
    this.scanList$ = this._scanService.getScannedList();
}

然后在模板中使用异步管道订阅那里的可观察对象，并将其设置为模板中的scanList。

<table *ngIf="listScan$ | async as listScan">
  <tr *ngFor="let objscan of scanList">
    <td>{{ objscan.ContainerID }}</td>
    <td>{{ objscan.ContainerNo}}</td>
    <td>{{ objscan.Size}}</td>
    <td>{{ objscan.Type}}</td>
    <td>{{ objscan.ScanningType}}</td>
 </tr>
<table>

将数组绑定到Angular中的表

3 个答案: