Angular 4：自定义数据类型的“类型”中缺少“属性”

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();
  }

}

我已经搜索并发现了这个类似的问题：Angular 4 Error : Property 'includes' is missing in type '() => any' 但是虽然错误消息相似，但问题的原因似乎并不相同。我还仔细检查了数据类型，模型和模拟数据似乎是相同的......

我在这里错过了什么？

Answer 1

我在尝试返回 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"],

希望这会有所帮助。

Answer 2

线索在错误中。您正在尝试在这一行将 Promise 类型的东西分配给 OneDSlider 类型的东西this.onedsliders = this.simXService.getOneDSliders();

您可以不从 SimXService 返回承诺，也可以让 AppComponent 等待承诺解决以检索值。

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