Angular 绑定值错误。元素隐式具有 'any' 类型。 属性 'title' 不存在于类型 'Object'.ts(7053)

Question

我正在尝试使用 Angular 从 api 调用中获取数据并将其绑定到一个变量。

AppComponent代码如下

export class AppComponent {
  title = 'Conveyor';
  clr = 'green';
  serialPortName = "COM123"
  constructor(private convServer:ConvServerService)
  {
    

  }

  ngOnInit() {
    this.convServer.getPortName().subscribe((data)=>
    {

      console.warn(data);
      this.serialPortName = data['title'];
    })
  }
}

api 电话来自 here。它具有以下 json 格式数据。

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

服务代码如下：

import { Injectable } from '@angular/core';

import { getLocaleDateFormat } from '@angular/common';
import {HttpClient} from '@angular/common/http'
@Injectable({
  providedIn: 'root'
})
export class ConvServerService {

  constructor(private http:HttpClient) {
    
   }

   getPortName() {
   let url= "https://jsonplaceholder.typicode.com/todos/1";  
   return this.http.get(url);
  }
}

数据在网络控制台中正确显示，如下图所示。

数据在 Web 控制台中正确显示，但是当我想获取特定数据（如数据 ['title'] 时出现错误

Element implicitly has an 'any' type because expression of type '"title"' can't be used to index type 'Object'. Property 'title' does not exist on type 'Object'.ts(7053)

我该如何解决？我是 angular 和网络开发的新手。有什么建议吗？

Answer 1

答案是我使用 data:any 和 this.serialPortName = data.title;

将数据类型更改为 any

class AppComponent修改后的ngOnInit()功能在这里

ngOnInit() {
    this.convServer.getPortName().subscribe((data:any)=>
    {

      console.warn(data);
      this.serialPortName = data.title;
    })
  }

它现在运行完美

Answer 2

试试这个：

this.serialPortName = data.title;

我猜你收到的是一个对象，而不是对象数组