Angular - 错误 TS2322：类型“对象”不可分配给国家列表的类型“从不 []”答案

【问题标题】：Angular - error TS2322: Type 'Object' is not assignable to type 'never[]' for list of countriesAngular - 错误 TS2322：类型“对象”不可分配给国家列表的类型“从不 []”
【发布时间】：2021-06-14 04:09:48
【问题描述】：

在我的 Angular-11 应用程序中，我正在尝试将国家/地区列表加载到选择选项中作为下拉列表。然后在用户注册中显示：

我在 component.ts 中有这段代码：

export class SignupCompanyComponent implements OnInit {
  countries = [];

  ngOnInit() {
    this.loadCountries();
    console.log(this.loadCountries());
  }

  headers = { //Token for API Authorization
    'Authorization': this.token.get(),
    'X-Requested-With': 'XMLHttpRequest'
  }

  loadCountries() {
    this.api.get('core/fetchCountries', this.headers).subscribe(
      data => this.countries = data,
      error => {
        this.toastr.error(error.message);
      }
    );
  }
}

而component.html是：

<div class="col-12 col-md-4">
  <div class="form-group">
    <label for="inputCountryName">Country</label>
    <select id="inputCoutryName" class="form-control custom-select" formControlName="country_id" placeholder="Country">
      <option selected disabled>Select one</option>
      <option *ngFor="let c of countries" value="{{c.id}}">{{c.name}}</option>
    </select>
  </div>

我收到了这个错误：

错误 TS2322：类型“对象”不可分配给类型“从不 []”。 “对象”类型可分配给极少数其他类型。您的意思是改用 'any' 类型吗？

74 个数据 => this.countries = 数据， ~~~~~~~~~~~~~~~~~

即使我改变了

国家 = [];

进入

国家 = 任何；

我又遇到了一个错误：

错误 TS2693：'any' 仅指一种类型，但在此处用作值。

43 个国家 = 任何国家；

国家/地区的 api JSON 响应如下：

{
  "message": "Countries successfully viewed.",
  "error": false,
  "code": 200,
  "results": {
    "countries": [{
        "id": 2,
        "capital": "Accra",
        "nationality": "Ghanaian",
        "country_flag": null,
        "currency": null,
        "currency_code": null,
        "currency_sub_unit": null,
        "currency_symbol": null,
        "currency_decimals": null,
        "full_name": null,
        "iso_3166_2": "GH",
        "iso_3166_3": "GHA",
        "name": "Ghana",
        "calling_code": null,
        "created_by": 1,
        "updated_by": 0,
        "created_at": "2021-06-03 00:00:00",
        "updated_at": null,
        "deleted_at": null
      },
      {
        "id": 1,
        "capital": "Abuja",
        "nationality": "Nigerian",
        "country_flag": null,
        "currency": null,
        "currency_code": null,
        "currency_sub_unit": null,
        "currency_symbol": null,
        "currency_decimals": null,
        "full_name": null,
        "iso_3166_2": "NG",
        "iso_3166_3": "NGN",
        "name": "Nigeria",
        "calling_code": null,
        "created_by": 1,
        "updated_by": 0,
        "created_at": "2021-06-03 00:00:00",
        "updated_at": null,
        "deleted_at": null
      }
    ]
  }
}

我该如何解决这个问题？

谢谢

【问题讨论】：

这能回答你的问题吗？ What is "not assignable to parameter of type never" error in typescript?

标签： angular

【解决方案1】：

typescript 中的变量声明如下：

var [identifier] : [type-annotation] = value ;

所以在你的情况下尝试：

countries: any[] = [];

（不需要 var）

【讨论】：

@GaelJ - 当我添加国家/地区时：any[] = [];，我收到此错误：错误 TS2322：类型“对象”不可分配给类型“任何 []”。 “对象”类型可分配给极少数其他类型。您的意思是改用“任何”类型吗？ this 有下划线：this.countries = data,
@htp15 您对数组语法的使用非常令人困惑，尤其是对于 Angular 或 TypeScript 的新手而言。目前尚不清楚您是指数组、元组、可选值，还是输入这些方括号作为指示占位符的方式。请遵循惯例并更好地格式化您的答案。

【解决方案2】：

在您的subscribe 中，您需要“遍历”响应：

this.countries = data.results.countries // according to your example

然后将其键入为数组countries: any[] 或更好地定义接口而不是any

【讨论】：

【解决方案3】：

根据 API 响应，您需要在订阅上直接使用 results 值，您正在将对象分配给数组，这是无效的 (data => this.countries = data.results.countries)。

最好将countries 声明为预期的自定义类型。

contries: {id: string, ...otherProperty: string}[]= null;

作为记录，您还可以在 tsconfig.json 文件中删除此验证，使用以下两个属性：

 "noImplicitReturns": false,
 "strictNullChecks":false,

【讨论】：