Question

有两种这样的模型：

note.model.ts：

coffeescript

year.model.ts：

export class Note{
    constructor(
        public note_id?:number,
        public note_text?: string,
        public years?: number
    ) { }
}

如何从列表中选择日期（“年份”模型）以仅在表中显示与日期和选择的内容匹配的信息？

export class Year{
    constructor(
        public years?:number
    ) { }
}

Answer 1

您可以在HTML中添加点击事件：

<select>
  <option type="number" *ngFor="let year of years" (click)="onYearSelection(year.years)">
    {{ year.years }}
  </option>
</select>

并遍历已过滤的笔记列表：

<div>
    <table>
        <thead>
            <tr>
                <th>Note</th>
                <th>Year</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let note of filteredNotes">
                <td>{{note.note_text}}</td>
                <td>{{note.years}}</td>
            </tr>
        </tbody>
    </table>
</div>

在ts文件中，您可以编写代码以根据所选年份过滤注释列表。

filteredNotes = [];

onYearSelection(year){
    this.filteredNotes = []
    this.filteredNotes = this.notes.filter(note => note.years == year);
}

如何通过从列表中选择日期来显示信息

1 个答案: