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

Question

有两种这样的模型:

注意.model.ts:

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

年.模型.ts:

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

如何从列表中选择日期(年份模型)以仅显示表格中与所选日期匹配的信息？

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

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

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