json 错误类型错误:tags. tagName. indexOf不是一个函数:Angular :过滤可观察对象〈SomeObject []>,提供子字符串作为参数

0lvr5msh  于 2022-12-20  发布在  Angular
关注(0)|答案(1)|浏览(113)
    • 情况:**

我有一个类,它有两个属性:id和tagName。我有一个json文件,它有一个数组与上述类相匹配。我想提取数组中的所有项目,这些项目的tagName包含一个给定的子字符串作为参数,不等于tagName,但在字符串中的任何位置。我正在一个服务中尝试这样做,在一个函数中返回一个上述类类型的观察值。在下面的尝试中,我将使用"java"作为搜索参数。

    • 班级:**
export class TechTag {
    id?: number;
    tagName!: string;
}
    • de服务中返回每个对象的函数:**
getAllTechTags(): Observable<TechTag[]> {
    return this.http.get<TechTag[]>(this.baseUrl);
}
    • JSON文件的URL:**
"../assets/techTags.json"
    • 文件示例:**
[
  {
    "id": 1,
    "tagName": ".net"
  },
  {
    "id": 2,
    "tagName": "html"
  },
  {
    "id": 3,
    "tagName": "javascript"
  },
  {
    "id": 4,
    "tagName": "css"
  },
  {
    "id": 5,
    "tagName": "php"
  },
  {
    "id": 8,
    "tagName": "c"
  },
  {
    "id": 9,
    "tagName": "c#"
  },
  {
    "id": 10,
    "tagName": "c++"
  },
    • 如何检查组件中的结果:**
ngOnInit(): void {

    let techTags: TechTag[];

    this.techTagsService.searchTechTags("java").subscribe(
      {
        next: (response => {
          techTags = response;
        }),
        complete: () => {
          console.log(techTags);
        }
      }
    );

  }
    • 我的尝试:**
    • 第一次尝试**
searchTechTags(tagName: string): Observable<TechTag[]> {
    return this.http.get<TechTag[]>(this.baseUrl).pipe(map(data => data.filter(tags => 
    tags.tagName == tagName)));
  }
    • 结果#1(仅返回java)**
[
    {
        "id": 17,
        "tagName": "java"
    }
]
    • 第二次尝试**
searchTechTags(tagName: string): Observable<TechTag[]> {
    return this.http.get<TechTag[]>(this.baseUrl).pipe(map(data => data.filter(tags => 
    tagName.includes(tags.tagName))));
  }
    • 结果#2(不返回javascript)**
[
    {
        "id": 17,
        "tagName": "java"
    },
    {
        "id": 11644,
        "tagName": "j"
    },
    {
        "id": 118435,
        "tagName": "ava"
    }
]
    • 第三次尝试**
searchTechTags(tagName: string): Observable<TechTag[]> {
    return this.http.get<TechTag[]>(this.baseUrl).pipe(map(data => data.filter(tags => 
    tags.tagName.includes(tagName))));
  }
    • 结果#3(甚至不起作用)**

错误类型错误:tags. tagName. includes不是函数

    • 第四次尝试**
searchTechTags(tagName: string): Observable<TechTag[]> {
    return this.http
      .get<TechTag[]>(this.baseUrl)
      .pipe(
        map((data) => data.filter(p => p.tagName.indexOf(tagName) !== -1))
      )
  }
    • 结果#4**

错误类型错误:p.标记名. indexOf不是函数

zphenhs4

zphenhs41#

在过滤它之前,将toString()添加到tagName,因为它看起来像object而不是string

map((data) => data.filter(p => p.tagName.toString().indexOf(tagName) !== -1))

相关问题