在Angular2中，过滤器参数需要指定类型。

19 浏览
0 Comments

在Angular2中，过滤器参数需要指定类型。

我在尝试将数据分配给我的Angular组件之前筛选数组时遇到了一些问题。我有一个提示的数组，但我只想最初显示一个提示。我的问题是，当我尝试按匹配ID为1的提示筛选数组时，我不断收到“\'hint\'隐式具有\'any\'类型” 的错误。尽管这只是一个计数器，但在cli中应该没问题。我在tsconfig.json中禁用了字符串注入参数，并遵循了其他一些有关禁用严格类型注入规则的帖子，但我无法让Angular停止要求我为计数器指定类型，因此我无法在这里使用filter函数。\n下面是我的响应对象的图像。\n希望能获得任何建议，或者如果有更合理的方法来筛选数据，那将是很棒的。\n以下是我的specs服务函数，它指向我的虚拟json服务器。\n

export class SpecsService {
  private apiUrl = 'http://localhost:3000'
  constructor(private http:HttpClient) {}
  getHints(): Observable{
    return this.http.get(`${this.apiUrl}/Hints`)
  }
}

\n

import { Component, Input, OnInit } from '@angular/core';
import { SpecsService } from 'src/app/specs.service';
import {Hint} from './hint';
@Component({
  selector: 'app-hintbox',
  templateUrl: './hintbox.component.html',
  styleUrls: ['./hintbox.component.css']
})
export class HintboxComponent implements OnInit {
  currentHint: Hint[]=[]
  hint: Hint={hint:'',id:0}
  constructor(private specsService: SpecsService) { }
  ngOnInit(): void {
    this.specsService.getHints().subscribe((response)=> this.currentHint= response.filter((hint:Hint) => hint.id===1));   
  }
}

0

2 答案

0 Comments

问题的出现原因是因为代码中使用了filter方法，但是filter方法只能用于数组，而不是对象。由于响应结果是一个对象，所以在使用filter方法时会报错"Property 'filter' does not exist on type 'Object'"。

解决方法是将响应结果转换为数组，然后再使用filter方法进行过滤。可以通过对响应结果进行类型转换来解决这个问题。首先，创建一个类型为Hint的类，用于定义响应结果的类型。然后，在订阅方法中，使用filter方法对转换后的数组进行过滤。

具体解决方法如下：

1. 创建一个Hint类，用于定义响应结果的类型：

export class Hint {
  id: number;
  otherprop: string;
}

2. 在订阅方法中，对响应结果进行类型转换和过滤：

this.specsService.getHints().subscribe((response) => {
  const hintsArray: Hint[] = Object.values(response); // 将响应结果转换为数组
  this.currentHint = hintsArray.filter((hint: Hint) => hint.id === 1); // 使用filter方法进行过滤
});

通过以上方法，即可解决"Property 'filter' does not exist on type 'Object'"的错误，并成功对响应结果进行过滤。

0
0 Comments

在上述代码中，getHints()函数返回一个类型为Object的Observable。这就是为什么每当你尝试赋值时会返回一个未知类型的原因。一个简单的解决方案是尝试以下操作来检查这种情况：

  getHints() {
    return this.http.get<any>(`${this.apiUrl}/Hints`)
  }

通过以上代码，错误将消失，但这可能不是最佳的解决方法。

所以更好的解决办法是了解期望的对象并为其类型化返回值。

从你的代码中看，你似乎收到了一个项目数组，所以你可以像下面这样做：

interface IHintResponse {
  id:  number;
  // 其他属性
}
  getHints() {
    return this.http.get<IHintResponse[]>(`${this.apiUrl}/Hints`)
  }

啊，我明白了，感谢你的帮助，这解决了调用filter时类型抛出错误的问题，但我的主要问题仍然存在...即使我尝试将'hint'声明为filter()的参数类型，我仍然会得到："hint"隐式具有 "any" 类型（这是我的原始问题）。我找到了一个解决办法来解决我无法为参数声明类型的问题 -> stackoverflow.com/questions/43064221/… 虽然作为跟进，从typescript的角度来说，上面的答案应该也适用于那个问题，但是我个人无法通过导出自定义接口的方式使错误消失:)所以谢谢你的帮助

0