Question

我正在尝试创建一个提供程序来简单地返回一个数组。我对Angular很新，我不确定我在这里做错了什么，但是我收到了以下错误：

'[ts]计算属性名称必须是'string'，'number'，'symbol'或'any'类型。'

任何人都可以看到这个问题吗？

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class StatesProvider {

  states:{};

  constructor(public http: Http) {
    console.log('Hello StatesProvider Provider');
  }

  getStates(){

    this.states = {[

      {
          "name": "Alabama",
          "abbreviation": "AL"
      },
      {
          "name": "Alaska",
          "abbreviation": "AK"
      },
      {
          "name": "American Samoa",
          "abbreviation": "AS"
      },
      {
          "name": "Arizona",
          "abbreviation": "AZ"
      },
      {
          "name": "Arkansas",
          "abbreviation": "AR"
      },
      {
          "name": "California",
          "abbreviation": "CA"
      }

     ... (etc)

  ] 
}

Answer 1

您必须将状态声明为任何对象或数组，

states:any;

并在 getStates

中返回数组

 getStates() : any {

    this.states = {[
      {
          "name": "Alabama",
          "abbreviation": "AL"
      },
      {
          "name": "Alaska",
          "abbreviation": "AK"
      }
    ];    
   return this.states;  
}

Answer 2

那是因为你的代码（我在下面重复）创建了一个对象，其（第一个）属性名称无法由Typescript确定：

this.states = {[
  {
      "name": "Alabama",
      "abbreviation": "AL"
  },
  ...
]}

Typescript认为您正在定义一个对象（由{}），其属性名称为Typescript期望为字符串，数字，符号或任何标识名称。但你改为[{"name": "Alabama", "abbreviation": "AL"}, ... ]。

如果你改为拥有this.states = { arrayOfStates: [{"name": "Alabama", "abbreviation": "AL"}, ... ] }，那就行了。在这种情况下，您将this.states定义为具有名为arrayOfStates的数组属性的对象。

但根据你的问题，你似乎只想返回一个数组，而不是一个带有数组属性的对象。

因此，您应该将states定义为数组，而不是将其定义为对象。要定义为包含any类型的数组：

states: any[];

然后在getStates中为其分配一个数组：

getStates() : any[] {
    this.states = [
      {
          "name": "Alabama",
          "abbreviation": "AL"
      },
      ...  // Some elements removed for brevity
    ];

    return this.states;
}

请注意，方括号内没有大括号。

使用Angular 2提供程序返回数组

2 个答案: