从 Angular 函数返回对象数组时出错

Question

下午好，我想从外部函数 return 对象数组时遇到问题。

我已经声明了一个对象 class 有 2 个属性，它的构造函数和一个在我 return 这个例子中有超过 50 个对象的数组我只放了 4 个对象

export class Object {
  formcontrolName: String;
  formcontrolTraducido: String;

  constructor(formcontrolName: String, formcontrolTraducido: String) {
    this.formcontrolName = formcontrolName;
    this.formcontrolTraducido = formcontrolTraducido;
  }

  getData() {
    return [
      { formcontrolName: 'callId', formcontrolTraducido: 'CId' },
      { formcontrolName: 'collegeCareerId', formcontrolTraducido: 'Carrera' },
      {
        formcontrolName: 'collegeDepartmentId',
        formcontrolTraducido: 'Nombre del Departamento/Centro',
      },
      {
        formcontrolName: 'detailedAreaKnowledgeId',
        formcontrolTraducido: 'Campo Detallado',
      },
    ];
  }
}

问题是我想从另一个组件调用对象 class 的 getData 函数，但是当 returning 时出现以下错误：

类型 '() => { formcontrolName: string; formcontrolTraducido: 字符串; }[]' 缺少类型 'Object[]' 中的以下属性：pop、push、concat、join

import { Component, OnInit } from '@angular/core';
import { Object } from './object';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
 data: Object;
  arrayData: Object[];
  constructor() {}

  ngOnInit() {
    this.arrayData = this.data.getData;
    console.log('arrayData: ' + this.arrayData);
  }

}

stackblitz example code

我是 angular 的新手，刚开始使用数组，我想知道如何解决我的问题。非常感谢

Answer 1

首先属性 arrayData 的类型不是 Object 类型，它是您正在使用的 class , 因此更合适的类型应该与 return 通过 getData.

方法编辑的类型相同

您可以通过使用打字稿助手类型 ReturnType 来获取它的 return 类型，因此一个好的输入方式如下：

  arrayData: ReturnType<Object['getData']>;

我的一个建议是不要将名称 Object 用于 class，因为它与 Object 和 javascript 内置名称相同。

之后你遇到的问题：

  ngOnInit() {
    this.arrayData = this.data.getData();
    console.log('arrayData: ' + this.arrayData);
  }

是不是您正在将方法分配给需要数组的变量，这就是您收到错误的原因：

Type '() => { formcontrolName: string; formcontrolTraducido: string; }[]' is missing the following properties from type 'Object[]': pop, push, concat, join

你只需要调用这样的方法：

    this.arrayData = this.data.getData();

考虑到所有这些，最终代码如下所示：

import { Component, OnInit } from '@angular/core';
import { Object } from './object';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular';
  data: Object;
  arrayData: ReturnType<Object['getData']>;
  constructor() {}

  ngOnInit() {
    this.arrayData = this.data.getData();
    console.log('arrayData: ' + this.arrayData);
  }
}

从 Angular 函数返回对象数组时出错

Error returning an array of objects from an Angular function

javascript

arrays

angular

typescript

arrayobject