Question

我最近开始使用TypeScript和angular2（约一周前）。

我正在尝试构建一个将从数据库加载的表（目前还没有查看过，现在硬编码。）

所以我有以下课程：

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

所以基本上一个人会分配罚款。

现在我正试图向他们展示罚款

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

然而，当加载页面时，我得到的错误无法读取null的“insertrow”属性。

任何帮助/有意义的滥用/批评都将受到赞赏。

在你问为什么let而不是var

之前，我正在使用gulp作为编译器

Answer 1

如果可以避免，请不要在TypeScript中创建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
    }
}

动态创建/填充表

1 个答案: