Angular 12 应用程序中的 NgModel 和管道不存在属性

Question

我是 Angular 12 的新手， 我创建了一个搜索输入和一个静态数据列表，我决定在搜索某些内容时编写一个管道来过滤数据， 因此，在我在 ngFor 中添加管道后，我收到一条错误消息： 错误：src/app/template/ui/pages/courses/courses.component.html:23:78 - 错误 TS2339：“CoursesComponent”类型上不存在属性“查询”。

23       <div class="col-12 col-lg-4" *ngFor="let item  of data | searchFilter: query ">
                                                                                ~~~~~

  src/app/template/ui/pages/courses/courses.component.ts:13:16
    13   templateUrl: './courses.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~
    The error occurs in the template of component CoursesComponent.

所以我在这里检查了现有的答案，但没有人谈论 Pipe 和 NgModel 所以这是我的管道：

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
    name: 'searchFilterPipe'
})

export class SearchFilterPipe implements PipeTransform {

    transform(value: any, args?: any): any {
        if(!value) return null;
        if(!args) return value;
  
        args = args.toLowerCase();
  
        return value.filter(function(data: any){
            return JSON.stringify(data).toLowerCase().includes(args);
        });
    }

}

这是我的看法：

 <form action="">
              <div class="input-group mb-4 border rounded-pill p-1">
                <input id="searchInputtwo" type="search"  [(ngModel)]="query" placeholder="What're you searching for?" aria-describedby="button-addon3" class="form-control bg-none border-0" >
                <div class="input-group-append border-0">
                  <button id="button-addon3" type="submit" class="btn btn-link text-dark"><i class="fa fa-search"></i></button>
                </div>
              </div>
            </form>
          </div>
    </div>
    <div class="row" id="lessonList">
      <div class="col-12 col-lg-4" *ngFor="let item  of data | searchFilter: query ">
        <div class="card mb-4 mb-lg-0 border-secondary shadow">
          <img src="{{item.image}}" alt="Animations CSS modernes" class="card-img-top">
          <div class="card-body">
            <h5 class="card-title">{{ item.title }}</h5>
            <p class="card-text">{{item.text}}</p>
            <a href="courses/details/{{item.id}}" class="btn btn-info btn--start ">Démarrer l'apprentissage</a>
          </div>
        </div>
      </div>

这是我的 Ts 文件：

import { Component, Input, OnInit, NgModule } from '@angular/core';    
import { chapterModel } from 'src/app/core/models/chapter.model';
import { competencesModel } from 
 'src/app/core/models/competences.model';
import { CourseModel } from 'src/app/core/models/course.model';
import { preriquisiteModel } from 
'src/app/core/models/preriquisite.model';
import { teacherModel } from 'src/app/core/models/teacher.model';
import { SearchService } from 'src/app/core/services/search.service';


@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.scss']
})
export class CoursesComponent implements OnInit {

  public searchFilter: any = '';
  public data:CourseModel[];

  constructor(private searchService: SearchService) {
    this.data = [
      new CourseModel(1,"Créez des animations CSS","Vous allez plonger dans le monde des animations CSS pour donner vie à vos pages web !",
      [new chapterModel(1,"coo","text")],false,
      [new preriquisiteModel(2,"Programmation JavaScript","Programmation JavaScript","Learn Java Script !")],
       [ new competencesModel("Savoir Faire des animations")], [ new teacherModel(52,"Laura DuFont") ],
       "assets/images/lessons/css.jpeg"),

       new CourseModel(2,"Programmer avec JavaScript","Ce cours est conçu pour vous enseigner les bases du langage de programmation JavaScript.",
       [new chapterModel(1,"coo","text")],false,
       [new preriquisiteModel(1,"Programmation html/css","Programmation html/css","Learn Html/Css !")],
        [ new competencesModel("Savoir le language Java Script")], [ new teacherModel(53,"Will Alexander") ],
        "assets/images/lessons/js.jpeg"),

        new CourseModel(3,"Les fondamentaux de Swift","Découvrez le développement iOS et réalisez des applications taillées pour l'iPhone et l'iPad !",
        [new chapterModel(1,"coo","text")],false,
        [new preriquisiteModel(2,"Programmation ","Programmation ","Learn Swift !")],
         [ new competencesModel("Savoir programmer pour Iphone et Ipad")], [ new teacherModel(54,"Jamie Sutherland") ],
         "assets/images/lessons/swift.jpeg"),
    ];
   }

  ngOnInit(): void {
  
  }

 searchForm(){
   this.searchService.searchAndFilterCourses(this.searchFilter);
   console.log(this.searchFilter);

   }

}

我从 Angular 9 的教程中获取了这段代码，但我不知道我的 Angular 12 是否需要不同的语法。

我的目标是找到解决此问题的方法，并将该解决方案提供给该错误所有可能的未来受害者。

Answer 1

当您使用[(ngModel)] 时，您将输入字段的值绑定到组件的 TS 文件中的属性。在您的情况下，您有 [(ngModel)]="query" 这意味着它期望属性 query 存在。

但在您的 TS 文件中，您只定义了 searchFilter 和 data。添加public query = '';，它应该不再给你错误。

此外，除非您计划在您的应用中多次使用此过滤逻辑，否则您不需要设置管道。如果只发生在该组件中，则应将过滤逻辑保留在组件的 TS 文件中。