Angular - 类型“{}”缺少类型“任何 []”中的以下属性

Question

在我的 Angular 项目中，我收到此错误：Type '{}' is missing the following properties from type 'any[]'

我有一个简单的角度代码，其中有一个帮助类向 url 发出请求，它发送回一个像 [ {a: b, c: d}, {e: f} ... ] 这样的 JSON 数组，一切正常，具有预期的结果，但是当我尝试将结果返回到主页。

我会继续强制执行该类型，但不知道我可能需要什么来解决此错误并想了解它。

我愿意接受有关代码的问题。

---

帮助类

export class ExampleJsonGetter{
  constructor(private http: HttpClient) {
  }

  getArray() {
    return new Promise((resolve, reject) => {
      this.http.post<any>('https://anUrl.com/getjsonarray')
        .subscribe({
          next: data => {
            resolve(data);
          },
          error: error => {
            reject(error);
          }
        });
    });
  }
}

主页类

export class MainPage{
  variable = [];
  constructor(){
    example.getArray().then((data)=>{
/*★*/ variable = data;  /* ★ */
      console.log(variable); // on firefox: 'Array(12): ...' As expected
      console.log(typeof variable); // 'object', souldn't it be Array?
    }).catch(e=>console.error(e));
  }
}

---

似乎起作用的唯一方法是将★替换为variable = new Array( ...data);

我什至不知道那些三点是做什么的，你能解释一下吗？

Answer 1

这是一个typescript 错误，表示类型不匹配。让我们在下面考虑

getArray() {
    return new Promise((resolve, reject) => {
      this.http.post<any>('https://anUrl.com/getjsonarray')
        .subscribe({
          next: data => {
            resolve(data);
          },
          error: error => {
            reject(error);
          }
        });
    });
  }

getArray() 将返回Promise<any>，因为this.http.post<any>('https://anUrl.com/getjsonarray') 行返回any

在主页中有variable = [];，表示类型any[]。因此，您尝试将类型 any 分配给类型 any[]，这将引发错误。

要解决此问题，请将行更改为 this.http.post<any[]>('https://anUrl.com/getjsonarray')

Answer 2

最好使用Subscription 或Promise，而不是在单个http 调用中组合它们。

助手

import { throwError, Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';


export class ExampleJsonGetter {
   ...
   getArray(): Observable<any> {
     return this.http
       .post<any>('https://anUrl.com/getjsonarray')
       .pipe(catchError(err => throwError(err)))              // Catch and throw error

   }
}

如果上述端点发送的是 object 而不是 array，您可以通过将其添加到管道中来将响应转换为数组

import { toArray } from 'rxjs/operators';

getArray(): Observable<any[]> {                   // Now in any[] type
  return this.http
     .post<any>('https://anUrl.com/getjsonarray')
     .pipe(
       toArray(),                                // Add this
       catchError(err => throwError(err))
     )             
}

主页

example
  .getArray()
  .subscribe(
    data => console.log(data, Array.isArray(data))      // Check the data and confirm if it's an array
    err => console.error(err)                           // Console any error if there's any

  )