我想將數據添加到Angular的ui中

Question

import { Component, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';

import { Batch } from '../../../config/batchnew/batch.model';
import { BatchService } from '../../../config/batchnew/batch.service';

@Component({
  selector: 'app-smart1',
  templateUrl: './smart1.component.html',
  encapsulation: ViewEncapsulation.None
})

export class Smart1Component {

 batches: Batch[];

  public data = [];
  public settings = {
    selectMode: 'single',  //single|multi
    hideHeader: false,
    hideSubHeader: false,
    actions: {
      columnTitle: '',
      add: false,
      edit: false,
      delete: false,
      custom: [],
      position: 'right' // left|right
    },
    add: {     
      addButtonContent: '<h4 class="mb-1"><i class="fa fa-plus ml-3 text-success"></i></h4>',
      createButtonContent: '<i class="fa fa-check mr-3 text-success"></i>',
      cancelButtonContent: '<i class="fa fa-times text-danger"></i>'
    },
    edit: {
      editButtonContent: '<i class="fa fa-pencil mr-3 text-primary"></i>',
      saveButtonContent: '<i class="fa fa-check mr-3 text-success"></i>',
      cancelButtonContent: '<i class="fa fa-times text-danger"></i>'
    },
    delete: {
      deleteButtonContent: '<i class="fa fa-trash-o text-danger"></i>',
      confirmDelete: true
    },
    noDataMessage: 'Loading.....',
    columns: {     
      source: {
        title: 'Source',
        editable: false,
        type: 'html',
        valuePrepareFunction: (value) => { return '<div class="text-right">' + value + '</div>'; }       
      },
      batchname: {
        title: 'Batch Name',
        editable: false,
        type: 'html',
        valuePrepareFunction: (value) => { return '<div class="text-center">' + value + '</div>'; }       
      },
      triggerdatetime: {
        title: 'Trigger Date',
        filter: true,
        type: 'html',
        valuePrepareFunction: (value) => { return '<div class="text-center">' + value + '</div>'; }       
      },
      status: {
        title: 'Status',
        type: 'html',
    valuePrepareFunction: (value) => { return (value=='PENDING' || value=='ERROR' || value=='SKIPPED') ? '<div class="text-danger text-center">' + value + '</div>' : '<div class="text-center">' + value + '</div>';   }
      },
      timetaken: {
        title: 'Time Taken (minutes)',
        type: 'html',
        valuePrepareFunction: (value) => { return '<div class="text-center">' + value + '</div>'; }       
      },
      countofrecords: {
        title: 'Count Of Records',
        type: 'html',
        valuePrepareFunction: (value) => { return '<div class="text-center">' + value + '</div>'; }       
      },
      deltaoutboundreqs: {
        title: 'Delta Outbound Requests',
        type: 'html',
        valuePrepareFunction: (value) => { return '<div class="text-center">' + value + '</div>'; }       
      },
      nextbatchdatetime: {
        title: 'Next Batch Date Time',
        type: 'html',
        valuePrepareFunction: (value) => { return '<div class="text-center">' + value + '</div>'; }       
      }
    },
    pager: {
      display: true,
      perPage: 2
    }
  };

public statusValue(value){
    alert('tst');


//  return '<div class="text-danger">' + value + '</div>';
}




  constructor(private router: Router, private batchService: BatchService) { 
    this.getData((data) => {
      this.data= data;
    });
  }

  public getData(data) {




     this.batchService.getBatches()
       .subscribe( data1 => 
            {
            //  alert(data1);
                this.batches = data1 as Batch[];
                this.data = this.batches;

                alert(data(JSON.parse(data)));
            }
           );




//     data(JSON.parse(data));


  public getData(data) {
    const req = new XMLHttpRequest();
    req.open('GET', 'assets/data/batchstatus.json');
    req.onload = () => {
      data(JSON.parse(req.response));
    };
    req.send();
  }
*/

  public onDeleteConfirm(event): void {
    if (window.confirm('Are you sure you want to delete?')) {
      event.confirm.resolve();
    } else {
      event.confirm.reject();
    }
  }

  public onRowSelect(event){
   // console.log(event);
  }

  public onUserRowSelect(event){
    //console.log(event);   //this select return only one page rows
  }

  public onRowHover(event){
    //console.log(event);
  }

}

1. 我在ui中創建了一個表，我想將數據追加到表中

2. 數據可以在控制台上正常打印，但是我無法添加到我創建的表中

3. Dy數據為json格式

4. 我的輸出是json格式

代碼中的任何修改，請建議我沒有錯誤。

 Object
    AllData
    :
    Array(18)
    0
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    1
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    2
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    3
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    4
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    5
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    6
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    7
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    8
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    9
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    10
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    11
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    12
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    13
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    14
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    15
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    16
    :
    {AcquiringDivision: "Sony", EndDate: "", Excl: "1", Format: "mp4", Language: "English", …}
    17
    :
    {AcquiringDivision: "Sony", EndDate: "20-05-2019", Excl: "yes", Format: "mp4", Language: "English", …}
    length
    :
    18
    __proto__
    :
    Array(0)
    __proto__
    :
    Object

Answer 1

您不應該在組件內直接添加HTML。 相反，您應該使用*ngFor循環遍歷模板中的數據：

<!-- smart1.component.html -->
<table>
  <thead>
    <th>AcquiringDivision</th>
    <th>EndDate</th>
    <th>Excl</th>
    <th>Format</th>
    <th>Language</th>
  </thead>
  <tbody>
    <tr *ngFor="let batch of batches">
      <td>{{batch.AcquiringDivision}}</td>
      <td>{{batch.EndDate}}</td>
      <td>{{batch.Excl}}</td>
      <td>{{batch.Format}}</td>
      <td>{{batch.Language}}</td>
    </tr>
  </tbody>
</table>

我建議您多讀一些有關Angular的工作原理及其樣式指南的文章， 網址為https://angular.io/guide/displaying-data