Блог

Главная - Вопросы по программированию - Угловая ошибка в значении привязки. Элемент неявно имеет тип «любой». Свойство «название» не существует для типа «Объект». ts(7053)

Угловая ошибка в значении привязки. Элемент неявно имеет тип «любой». Свойство «название» не существует для типа «Объект». ts(7053)

#angular #api #http #frontend #client-server

Вопрос:

Я пытаюсь получить данные из вызова api с помощью Angular и привязать их к переменной.

Код компонента приложения выглядит следующим образом.

 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 происходит отсюда. Он содержит следующие данные в формате 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);
  }
}

Данные отображаются правильно в веб-консоли, как показано на следующем рисунке.
консоль веб -

Данные отображаются правильно в веб-консоли, но когда я хочу получить конкретные данные, такие как данные [«название»], это приводит к ошибке

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)

Как я могу это решить? Я также новичок в угловой и веб — разработке. Есть какие-нибудь предложения?

Ответ №1:

попробуйте это:

 this.serialPortName = data.title;

Я предполагаю, что вы получаете объект, а не массив объектов

Комментарии:

1. Я использовал это и уже ответил на него, но для этого вам также нужно изменить тип данных data на data:any и @Akbar спасибо за ваш ответ

Ответ №2:

Ответ на это заключается в том, что я изменил тип данных на любой, используя data:any и this.serialPortName = data.title;

Измененная ngOnInit() функция class AppComponent находится здесь

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

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

Теперь он работает идеально

Метки: