Question

我将id传递给子组件，以便过滤该组件中的整个集合。为此，我使用@Input来定义要过滤的id。

<div *ngIf="exerciseLength > 0">
   <exercise [course]="Course" [filter-by-exercise-id]=""></exercise>
</div>

在我的孩子组件中，我有以下

@Input() course: Course;
@Input() filterByExerciseId;

exercises: Exercise[];    

constructor(//services) {
    // Initialize array to avoid undefined errors
    this.exercises = [];
}

ngOnInit() {
        if (this.course.exercises) {
            // exercises already included in data, no need to load them
            this.initExercises(this.course.exercises);
        } else {
            this.courseExerciseService.query(this.course.id, {
                courseId: this.course.id,
                withLtiOutcomeUrlExisting: true
            }).subscribe((exercises) => {
                this.initExercises(exercises);
            });
        }
    }

initExercises(exercises) {
        console.log('filter ' + this.filterByExerciseId);
        if (this.filterByExerciseId) {
            exercises = exercises.filter((exercise) => exercise.id === this.filterByExerciseId);
        }

     //more stuff
    }

但无论我做什么，我的filterIds都是未定义的。

我尝试直接传递值：

[filter-by-exercise-id]="2"

或者在父组件中声明一个变量并在

中传递该变量

家长定义：

ids: number = 2;

HTML：

[filter-by-exercise-id]="ids"

过滤本身的工作原理就是没有设置输入。知道我被卡住了吗？

由于@Input在ngOnInit（）中被定义，它应该是可用的吗？

另一个@Input当然可以正常工作。

Answer 1

这里的问题是你不能使用像@ @Input() filter-by-exercise-id;这样的名字使用

的@input

   @Input() filterByExerciseId;

和HTML as，

  <exercise [course]="Course" [filterByExerciseId]=ids></exercise>

@Input总是未定义

1 个答案: