Привязать массив к таблице в Angular

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

Я думаю, что ваш 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>

Answer 2

[{"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 3

Угловой код выглядит как ОК Я думаю, что ваш возвращенный массив из 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"}
];

ИЛИ просто попробуйте следующий код (установите this.scanList из данных [0])

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

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