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

Я не могу привязать данные к таблице с помощью 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 я получаю массив в консоли. Пожалуйста, проверьте изображение ниже.

enter image description here

Машинопись службы

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}]

вы создаете 2D-массив. удалите this.scanList = Array.of(this.scanList); , так как ваш data уже является массивом объектов

CruelEngine 10.09.2018 10:03

Раньше я удалял, но не мог привязать данные, а затем попытался использовать Array.of (this.scanList), но ничего не изменилось

Manish Goswami 10.09.2018 10:06

у вас есть массив массива, который ngFor работает с массивом объектов, измените это

Rahul Singh 10.09.2018 10:09

Да, Рахул я удалил, но результат тот же. Ничего не изменилось.

Manish Goswami 10.09.2018 10:11

Можете ли вы создать пример stackblitz для того же самого с фиктивным ответом, который вы получите?

Rahul Singh 10.09.2018 10:13

Вы уверены, что отправляете данные обратно? Проверьте вкладку сети в инструментах разработчика.

user4676340 10.09.2018 10:18

да. Пожалуйста, проверьте обновленный вопрос. я добавил служебный машинописный код

Manish Goswami 10.09.2018 10:22

попробуйте использовать scanlist [0] в вашем html или this.scanlist = data [0] в вашем машинописном тексте

Aarsh 10.09.2018 10:24

Выдает ошибку Aarsh: «Ошибка при попытке сравнить '[object Object]'. Разрешены только массивы и итерации»

Manish Goswami 10.09.2018 10:25

Вы используете ContainerID вместо containerID

Aarsh 10.09.2018 10:26

Позвольте мне добавить это в качестве ответа. Пожалуйста, примите это, если это поможет

Aarsh 10.09.2018 10:36
1
11
3 786
3

Ответы 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 из data [0])

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

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

Я думаю, что ваш HTTP-запрос завершается после отображения шаблона. Попробуйте использовать асинхронный конвейер и * ngIf, чтобы дождаться его завершения перед визуализацией таблицы.

Итак, верните наблюдаемое из вашей службы, которое еще не завершено:

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

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

Затем в вашем шаблоне используйте async pipe, подпишитесь на наблюдаемый там и установите его как 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>
[{"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>

Другие вопросы по теме