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

Question

有两个这样的模型：

note.model.ts:

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

year.model.ts:

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

如何从列表中选择日期（年份模型）以仅显示 table 中与 select 中的 select 日期相匹配的信息？

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

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

How to show information by selecting a date from the list

html

angular-template

angular