如何创建模型 angular2答案

【问题标题】：How to create a model angular2如何创建模型 angular2
【发布时间】：2017-07-07 11:55:12
【问题描述】：

我正在尝试将用户输入存储在模型中，如果我可以将属性嵌套在对象中并在我的组件中使用它们，那么模型会更好地组织。

我尝试的模型：

export class carConfig {
  make: string;
  model: string;
  colors: Colors;
}

class colorDetail  {
  id: number;
  name: string;
}

export class Colors {
  exterior: colorDetail;
  interior: colorDetail;
  interiorTrim: colorDetail;
  roof: colorDetail;
}

使用以下代码：

  setSelectedColor(category: string, colorID: number, colorName: string): void {
    switch (category) {
      case 'Exterior':
        this.car.colors.exterior.id = colorID;
        this.car.colors.exterior.name = colorName;
        console.log('1');
        break;
      case 'Interior':
        this.car.colors.interior.id = colorID;
        this.car.colors.interior.name = colorName;
        console.log('2');
        break;
      case 'Interior Trim':
        this.car.colors.interiorTrim.id = colorID;
        this.car.colors.interiorTrim.name = colorName;
        console.log('3');
        break;
      case 'Roof':
        this.car.colors.roof.id = colorID;
        this.car.colors.roof.name = colorName;
        console.log('4');
        break;
      default:
        break;
    }
  }

我收到以下错误：

Property 'Exterior' does not exist on type 'Object'.)

如何创建一个模型，它代表一个供我的组件使用的对象？

【问题讨论】：

this.car的内容是什么？

标签： angular javascript-objects angular2-template

【解决方案1】：

您可能应该使用角度模型绑定来完成所有这些操作，但在您的原始代码示例范围内，以下结构可以很好地工作

car.ts

export interface Car {
  make: string;
  model: string;
  colors: Colors;
}

export interface Color {
  id: number;
  name: string;
}

export interface Colors {
  exterior: Color;
  interior: Color;
  interiorTrim: Color;
  roof: Color;
}

export const ColorSelectionToPropertyMap = Object.freeze({
  'Roof': 'roof',
  'Exterior': 'exterior',
  'Interior': 'interior',
  'Interior Trim': 'interiorTrim'
});
export type ColorSelectionToPropertyMap = typeof ColorSelectionToPropertyMap;

export function createCar(make?: string, model?: string): Car {
  return {
    make,
    model,
    colors: {} as Colors
  };
}

在消费代码中

import {
  createCar,
  ColorSelectionToPropertyMap
} from './car';

export class CartComponent {
  car = createCar();

  setSelectedColor(
    category: keyof ColorSelectionToPropertyMap, 
    id: number,
    name: string
  ) {
    const propertyName = ColorOptions[category];
    this.car.colors[propretyName] = {
      name,
      id
    };
  }
}

【讨论】：