テーブルを動的に作成/投入する

Question

最近、TypeScriptとangular2を開始しました（約1週間前）。

私は（。でも今のハードコードされ、まだその時に見ていない）データベースからロードされますテーブルを構築しようとしている

だから私は、次のクラスがあります。

FIneClassを。 TS

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(); 
    } 
} 

だから、基本的に人がそれらに割り当てられた罰金を持っています。

今私は彼らの罰金にページをロードする際に

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

は、しかし、私は取得

TestPage.htmlをした人を表示しようとしていますエラーはnullの "insertrow"のプロパティを読み取ることができません。

助け/意味のある濫用/批判は高く評価されます。

letなくvar

Answer 1

はそれを避けることができるならばDOMに追加するには、活字体にHTML文字列を作成しない理由を尋ねる前に、私は、コンパイラとしてがぶ飲みを使用しています。代わりにビュー内のバインディングを使用して、モデルデータに基づいて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 
    } 
}