根据人的年龄过滤年份数组

Question

在我的项目中，我有一个年龄数组，我想根据人的年龄进行过滤，最大年龄是 65 岁，例如，如果一个人在 years 数组中是 61 岁，则只有3和4。 我怎样才能做到这一点？ 这是我的stackblitz

.html

      <input
        matInput
        formControlName="birthDate"
        type="text"
        class="form-control age"
        placeholder="ex: 25"
        required/>

 <carousel
    #myCarousel
    height="100%"
    width="120"
    cellsToShow="1"
    overflowCellsLimit="3"
    id="age" >
    <div class="carousel-cell" *ngFor="let year of years">
      {{ year.year }}Years
    </div>
  </carousel>

.ts

  years = [
    {
      year: 3,
      value: 3,
    },
    {
      year: 4,
      value: 4,
    },
  
  ];

  next() {
    this.personAge = (this.formGroup.get('formArray') as FormArray)
      .at(0)
      .get('birthDate').value;
    console.log(this.personAge);
    this.period = this.myCarousel.slideCounter + 3;
    console.log(this.period);
  }

Answer 1

您可以使用filter 函数来过滤数据。

类似的东西应该可以工作：

const years = [{year: 3, value: 3}, {year: 4, value: 4}, {year: 5, value: 5}, {year: 6, value: 6}, {year: 7, value: 7}];
const age = 60;
const result = years.filter(year => year.value + age <= 65); 
// result: [{year: 3, value: 3}, {year: 4, value: 4}, {year: 5, value: 5}]

如果您想直接在模板上执行此操作，可以使用pipe 对其进行过滤。

更新：

你的管道代码几乎是正确的，你错过了两件事。

• 由于管道有多个输入，您需要在第一个之后指定输入。 How do I call an Angular 2 pipe with multiple arguments?
• 我在示例中使用了 const age，因为它就是这样。您应该使用 this.age 作为对组件变量的引用，而不是函数变量，以便将其发送到管道。

这是管道的编码方式：

age-filter.pipe.ts

@Pipe({
  name: 'ageFilter',
})
export class AgeFilterPipe implements PipeTransform {
  transform(
    years: { year: number; value: number }[],
    age: number
  ): { year: number; value: number }[] {
    return years.filter((year) => year.value + age <= 65);
  }
}

component.html

<div class="carousel-cell" *ngFor="let year of years | ageFilter: age">
    {{ year.year }}Years
</div>

另外，对于以后的问题，请记住：How much research effort is expected of stack overflow。发布新问题应该是您最后的手段。