Как создать модель angular2

Question

Я пытаюсь сохранить пользовательский ввод в модели, которая была бы лучше организована, если бы я мог встраивать свойства в объекты и использовать их в моем компоненте.

Моя попытка модель:

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'.)

Как я могу идти о создании модели , который представляет объект для моего компонента для использования?

Answer 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 
    }; 
    } 
}