Angular 4: '属性 'includes' is missing in type' for custom data type

Question

我看到错误：

/root/simutronx/simutron-app/src/app/app.component.ts (45,5): Type
'Promise<OneDSlider[]>' is not assignable to type 'OneDSlider[]'. Property
'includes' is missing in type 'Promise<OneDSlider[]>'.

控制台中的这个：

/root/simutronx/simutron-app/src/app/mock-simutronx.ts (5,64): 
Type '{ id:    number; name: string; value: number; quantity: number; }[]'
is not assignable to type 'OneDSlider[]'.
Type '{ id: number; name: string; value: number; quantity: number; }' is
not assignable to type 'OneDSlider'.
Object literal may only specify known properties, and 'quantity' does not
exist in type 'OneDSlider'.  vendor.bundle.js:29679:4

创建数据服务后。型号（simutronx.ts）：

export class OneDSlider {
  id: number;
  name: string;
  value: number;
  quantity: number;
}

如您所见，数量属性存在于数据模型中。（这之前不包含数量属性，从那以后我重新启动了服务器进程）。

数据服务（simutronx.service.ts）：

import { Injectable } from '@angular/core';

import { OneDSlider, TwoDSlider, Switch, Output } from './simutronx';
import { ONEDSLIDERS, TWODSLIDERS, SWITCHES, OUTPUTS } from './mock-simutronx';

@Injectable()
export class SimXService {
  getOneDSliders(): Promise<OneDSlider[]> {
    return Promise.resolve(ONEDSLIDERS);
  }
  getTwoDSliders(): Promise<TwoDSlider[]> {
    return Promise.resolve(TWODSLIDERS);
  }
  getSwitches(): Promise<Switch[]> {
    return Promise.resolve(SWITCHES);
  }
  getOutputs(): Promise<Output[]> {
    return Promise.resolve(OUTPUTS);
  }
}

模拟数据（mock-simutronx.ts）：

import { UIConstructor, OneDSlider, TwoDSlider, Switch, Output } from './simutronx';

export const ONEDSLIDERS: OneDSlider[] = [
  { id: 1, name: 'Shipping Container Purchase Cost', value: 7, quantity: 9 },
  { id: 2, name: 'Container Rental Costs', value: 99, quantity: 15 }
];

export const TWODSLIDERS: TwoDSlider[] = [
  { id: 1, name: 'Available Shipping Containers', max_value: 99, min_value: 0, quantity: 3 },
  { id: 2, name: 'Purchasing Staff Available', max_value: 82, min_value: 0, quantity: 5 }
];

export const SWITCHES: Switch[] = [
  { id: 1, name: 'Min/Max', state: true }
];

export const OUTPUTS: Output[] = [
  { id: 1, name: 'Profit', value: 1000 }
];

还有我的app.component.ts：

import { Component } from '@angular/core';

import { UIConstructor, OneDSlider, TwoDSlider, Switch, Output } from './simutronx';
import { ONEDSLIDERS, TWODSLIDERS, SWITCHES, OUTPUTS } from './mock-simutronx';
import { SimXService } from './simutronx.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [SimXService]
})

export class AppComponent {
  title = 'SimutronX';
  onedsliders = ONEDSLIDERS;
  twodsliders = TWODSLIDERS;
  switches = SWITCHES;
  outputs = OUTPUTS;
  valuesinput = false;
  simXcreated = false;

  constructor(private simXService: SimXService) { }

  coefficients: UIConstructor = {
    id: 1,
    title: 'coefficients',
    value: 2
  }
  constraints: UIConstructor = {
    id: 1,
    title: 'constraints',
    value: 2
  }

  inputNums(): void {
    this.valuesinput = true;
  }

  createSimX(): void {
    this.simXcreated = true;
  }

  getOneDSliders(): void {
    this.onedsliders = this.simXService.getOneDSliders();
  }
  getTwoDSliders(): void {
    this.twodsliders = this.simXService.getTwoDSliders();
  }

}

我搜索并发现了这个类似的问题：但是尽管错误消息相似，但问题的原因似乎并不相同。我也仔细检查了数据类型，看起来模型和模拟数据是一样的...

我在这里错过了什么？

Answer 1

线索就在错误中。您正在尝试将 Promise< OneDSlider[]> 类型的内容分配给 OneDSlider 类型的内容 this.onedsliders = this.simXService.getOneDSliders();

您可以不 return 来自 SimXService 的承诺，或者让 AppComponent 等待承诺解决检索值。

getOneDSliders(): void {
  this.simXService.getOneDSliders()
    .then(sliders => {
      this.onedsliders = sliders;
    });
}

Answer 2

我运行在尝试 return Promise 时出现相同的错误消息：

  ERROR in /GitHub/Angular/skillwise-accounts-app/src/app/app.component.ts (22,5): Type 'Promise<Account[]>' is not assignable totype 'Account[]'.
  Property 'includes' is missing in type 'Promise<Account[]>'.

在查看 ES7 Array.prototype.includes() missing in TypeScript 之后，我的打字稿配置似乎遗漏了一些东西。为了修复我的错误，我最终需要更新我的项目 tsconfig.json 文件。我将以下内容添加到 compilerOptions:

    "lib": ["dom", "es2017"],

希望对您有所帮助。

Angular 4: '属性 'includes' is missing in type' for custom data type

Angular 4: 'Property 'includes' is missing in type' for custom data type

types

bundle

model

typescript

angular