Typescript + Ionic：在对象上使用过滤器

Question

我正在使用 Ionic 3.x。

我编写了一个基本的聊天应用程序，并希望能够过滤聊天中的单词。

我刚刚尝试在我的应用程序中实现一个搜索栏。我像这样修改了 HTML 文件：

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-item *ngFor="let chat of tempChats">

在 HTML 文件中，我有一个对象数组：

chats: Object[]=[];
tempChats: Object[]=[];

我后来填写了带有消息和标题的聊天。像这样：

this.chats.push({author: 'Jim',message: 'Hi!'});

然后我写了一个initializeChats函数和一个getItems函数：

initializeChats(){
   this.tempChats=this.chats;
}

getItems(){
  this.initializeChats();
  let val = ev.target.value;
  if (val && val.trim() != '') {
    this.tempChats = this.tempChats.filter((chat) => {
      return (chat.message.toLowerCase().indexOf(val.toLowerCase()) > -1);
    })
  }
}

不幸的是，这给出了错误： “对象”类型上不存在属性“消息”。

有人知道如何解决这个问题吗？

非常感谢您！

编辑： 做类似的事情

for(chat of chats){
  alert(chat.name);
}

有效。

Answer 1

错误只是 Typescript 抱怨 chats 属性的类型，因为 Object 类型定义没有定义 message 属性。

而不是这个：

chats: Object[]=[];
tempChats: Object[]=[];

像这样声明两个属性：

chats: Array<{ author: string, message: string }> = [];
tempChats: Array<{ author: string, message: string }> = [];

这样，您告诉 Typescript chats 属性是一个数组，并且该数组的每个对象都有两个属性，一个 message 和一个 author（都是字符串类型）。

编辑

处理这个问题的更好方法是创建一个具有这些属性的新类，像这样

export class ChatMessage {
  public author: string;
  public message: string;
}

然后你可以使用它来声明chats 属性，像这样

chats: Array<ChatMessage> = [];
tempChats: Array<ChatMessage> = [];

---

更新

同样，错误不是因为chats 属性的每个对象中不存在该属性，而是因为 Typescript 认为该数组中的每个对象 if 的类型为 Object 并且知道类型为 Object没有名为message 的属性。这是与 Typescript 相关的错误（因此，在编译时）。

如果你不知道那个类的形状，你可以通过像这样声明两个数组来让 Typescript 知道这一点：

chats: Array<any> = [];
tempChats: Array<any> = [];

通过使用any，您可以让 Typescript 知道该数组中的每个对象都可以是任何东西，并且可以避免您面临的错误。