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

这种模式有两种：

注.model.ts：

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

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

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

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

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

{{year.years}
注
年
{{note.note_text}
{{注.年份}

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

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