Динамическое создание/заполнение таблицы

Question

Недавно я начал использовать TypeScript и angular2 (около недели назад).

Я пытаюсь создать таблицу, которая будет загружаться из базы данных (даже не смотрел на это еще, зашит на данный момент.)

Поэтому у меня есть следующие классы:

FIneClass. ц

export class Fine { 

private _description: string; 
public get description(): string { 
    return this._description; 
} 
public set description(v: string) { 
    this._description = v; 
} 

private _date: string; 
public get date(): string { 
    return this._date; 
} 
public set date(v: string) { 
    this._date = v; 
} 
constructor(Description: string) { 
    this.description = Description; 
    let today = new Date(); 
    this.date = (today.getDate() + '/' + (today.getMonth() + 1) + '/' + today.getFullYear).toString(); 
} 
} 

import {Fine} from './FineClass'; 
    export class Person { 
    // Properties 

    private _name: string; 
    public get name(): string { 
     return this._name; 
    } 
    public set name(v: string) { 
     this._name = v; 
    } 

    private _fines: Fine[] = []; 
    public get fines(): Fine[] { 
     return this._fines; 
    } public set fines(v: Fine[]) { 
     this._fines = v; 
    } 
    constructor(Name: string) { 
     this.name = Name; 
    } 

    public AddFine(f: Fine) { 
     this.fines.push(f); 
    } 
    public toString(): string { 
     return ('Name: ' + this.name + ' Fines: ' + this.fines.length).toString(); 
    } 
} 

Так, по существу, человек будет иметь штрафы порученных им.

теперь я пытаюсь показать человека со своими штрафами

testpage.html

<h1 style="color: #5e9ca0; text-align: center;"><span style="text-decoration: underline;"><strong><span style="color: #ff0000; text-decoration: underline;">FINES</span></strong></span></h1> 
<hr /> 
<audio src="assets/sound/Star Wars Duel of the Fates - MLG Airhorn Remix.mp3" autoplay> 
<p>If you are reading this, it is because your browser does not support the audio element.  </p> 
</audio> 
<p>&nbsp;</p> 
<table style="height: 192px;" width="828" name="tblFines"> 
<tbody> 

testpage.component.ts

import {Component} from '@angular/core'; 
import {CORE_DIRECTIVES} from '@angular/common'; 
import {CompletedFilterPipe} from './completed-filter.pipe'; 
import {Person} from './PersonClass'; 
import {Fine} from './FineClass'; 


@Component({ 
    selector: 'as-testpage', 
    templateUrl: 'app/testpage/testpage.html', 
    directives: [CORE_DIRECTIVES], 
    pipes: [CompletedFilterPipe] 
}) 
export class TestPageComponent { 


    private _people: Person[] = []; 
    public get people(): Person[] { 
     return this._people; 
    } 
    public set people(v: Person[]) { 
     this._people = v; 
    } 

    constructor() { 
     // test 
     // initial load 
     try { 
      let table: HTMLTableElement = <HTMLTableElement>document.getElementById('tblFines'); 
      let p = new Person('Nico'); 
      let a = new Person('Mabu'); 
      let f = new Fine('not having a site as cool as mine'); 
      p.AddFine(f); 
      this.AddtoList(p); 
      this.AddtoList(a); 
      this.people.forEach(x => table.insertRow(table.rows.length + 1).); 

     } catch (error) { 
      alert(error); 
     } 
    } 


    public AddtoList(person: Person) { 
     this.people.push(person); 
     this.people.sort(); 
    } 

    /** 
    * refresh 
    */ 
    public refresh() { 
     // refresh the list 
    } 
} 

Однако при загрузке страницы я получаю ошибка не может прочитать свойство «insertrow» из null.

любая помощь/значимое злоупотребление/критика будут оценены.

Я использую глотку как компилятор, прежде чем спросить, почему let и не var

Answer 1

Не создавать HTML-строку в машинописном, чтобы добавить его в DOM, если этого можно избежать. Используйте вместо этого привязки в представлении для создания HTML на основе данных модели

@Component({ 
    selector: 'as-testpage', 
    template: ` 
    <table> 
     <tr *ngFor="let person of people> 
     <td>{{person.name}}</td> 
     </tr> 
    </table> 
    `, 
    directives: [CORE_DIRECTIVES], 
    pipes: [CompletedFilterPipe] 
}) 
export class TestPageComponent { 
    private _people: Person[] = []; 

    public get people(): Person[] { 
     return this._people; 
    } 
    public set people(v: Person[]) { 
     this._people = v; 
    } 

    constructor() { 
     let p = new Person('Nico'); 
     let a = new Person('Mabu'); 
     let f = new Fine('not having a site as cool as mine'); 
     p.AddFine(f); 
     this.AddtoList(p); 
     this.AddtoList(a); 
     this.people.forEach(x => table.insertRow(table.rows.length + 1).); 
    } 


    public AddtoList(person: Person) { 
     this.people.push(person); 
     this.people.sort(); 
    } 

    /** 
    * refresh 
    */ 
    public refresh() { 
     // refresh the list 
    } 
}