Question

我正在学习角度 10。下面是我从内置 API 获取数据的服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UsersService {

  constructor(private http:HttpClient) { }
  getData() {
    let url = 'https://jsonplaceholder.typicode.com/todos/';
    return this.http.get(url);
  }
}

此 API 将数据返回为 array of objects 但当我尝试将 app.component.ts 中的此数据分配给一个 array 变量时，它说此数据为 {{1 }}。

object

我也尝试过以下解决方案

import { Component } from '@angular/core';
import { UsersService } from './users.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'routing-demo';
  data=[]
  constructor(private user:UsersService) {

    this.user.getData().subscribe(data=>{
      this.data=data
      console.log(data)
    })
  }
}

但得到同样的错误

<块引用>

"TS2696：'Object' 类型可分配给很少的其他类型。确实如此你的意思是使用'any'类型吗？类型“对象”缺少 'never[]' 类型的以下属性：length、pop、push、concat、还有 26 个。”

Answer 1

您好，只需向 data=[] 声明 data: any = []; 您的问题得到解决

你也可以查看我的stackblitz

Answer 2

您应该设置正确的类型 (stackblitz)：

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";

interface Data {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class UsersService {
  constructor(private http: HttpClient) {}

  getData(): Observable<Data[]> {
    let url = "https://jsonplaceholder.typicode.com/todos/";
    return this.http.get<Data[]>(url);
  }
}

import { Component } from '@angular/core';
import { UsersService } from './users.service';

interface Data {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  title = 'routing-demo';
  data: Data[] = [];

  constructor(private user: UsersService) {
    this.user.getData().subscribe(data=>{
      this.data = data;
      console.log(data);
    })
  }
}

您的数据类型是：

interface Data {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

并且响应包含它的数组。您应该使用

创建一个类似 data.ts 的文件

export interface Data {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

并将其导入到您的组件和服务中。

Angular 10 'Object' 类型可分配给很少的其他类型。您是想改用“any”类型吗？

2 个答案: