Преобразование параметра во внутренний класс

Я определил внутренний класс в моем компоненте для хранения модели представления, и мне нужно преобразовать интерфейс ответа http в эту модель представления. Я пробовал так:

@Component({
  selector: 'app-tasklist-items-grid',
  templateUrl: './tasklist-items-grid.component.html',
  styleUrls: ['./tasklist-items-grid.component.scss'],
  providers: [TasklistItemsService, BsModalService]
})
export class TasklistItemsGridComponent implements OnInit {

// .....

  TaskListItemViewModel = class {    
    id?: number;
    tasklistId: number;
    typeOfTask: number;
    statusId: number;
    created_at: Date;
    updated_at: Date;
    checked: Boolean;
    rowVersion: number;
  }

  convertToViewModel = (item: TaskListItemViewModel) => item;
}

Однако TaskListItemViewModelтип не найден. Я попытался также определить как внутренний класс, так и метод как статический, но все же не работал.

Что мне не хватает?

angular,typescript,

2

Ответов: 3


0

Я думаю, вы можете объявить интерфейс своей модели вне компонента, а внутри вашего компонента просто создать вложенный класс (это выражение класса), который реализует этот интерфейс. А затем вы можете добавить свои методы в выражения класса.

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

export interface MyInterface {
  id?: number;
  tasklistId: number;
  typeOfTask: number;
  // other properties
}
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  TaskListItemViewModel = class implements MyInterface {
    constructor(
      public id: number,
      public tasklistId: number,
      public typeOfTask: number
    ) {}
    // other methods which you want to implement
  }

  convertToViewModel = (item: MyInterface) => new this.TaskListItemViewModel(1, 2, 3);
}

Конечно, этот пример показывает, насколько мощный TypeScript (в этом примере мы видим функцию выражений класса ), но я бы этого не делал в реальных проектах, так как большинство популярных стилей рекомендуют объявлять классы / интерфейсы / перечисления ... (aka модели) в отдельном файле, обычно это так some-feature.model.ts. И тогда мы можем использовать наши модели в других частях приложения, таких как компоненты, директивы и т. Д.


0

вам нужно определить класс вне TasklistItemsGridComponent с синтаксисом, как показано ниже, но если вы хотите создать вложенные классы, вам необходимо следовать решениям, используемым в ссылке: Любой способ объявить структуру классов гнезд в машинописном тексте?

class TaskListItemViewModel { 
  id?: number;
  tasklistId: number;
  typeOfTask: number;
  statusId: number;
  created_at: Date;
  updated_at: Date;
  checked: Boolean;
  rowVersion: number;
  }

@Component({
  selector: 'app-tasklist-items-grid',
  templateUrl: './tasklist-items-grid.component.html',
  styleUrls: ['./tasklist-items-grid.component.scss'],
  providers: [TasklistItemsService, BsModalService]
  })
export class TasklistItemsGridComponent implements OnInit {
   convertToViewModel = (item: TaskListItemViewModel) => item;
}

0

В соответствии с вашим требованием вы можете использовать его, как показано ниже:

@Component({
  selector: 'app-tasklist-items-grid',
  templateUrl: './tasklist-items-grid.component.html',
  styleUrls: ['./tasklist-items-grid.component.scss'],
  providers: [TasklistItemsService, BsModalService]
})
export class TasklistItemsGridComponent implements OnInit {
 taskListItem: TaskListItemViewModel;
 constructor() {
   // here or in ngOnInit
   // this.taskListItem = new TaskListItemViewModel();
 }
// .....
 ngOnInit() {
   // this.taskListItem = new TaskListItemViewModel();
 }
  convertToViewModel = (item: ITaskListItemViewModel) => item;
}

// in another file or same component you can write this class
export class TaskListItemViewModel implements ITaskListItemViewModel{    
    id?: number;
    tasklistId: number;
    typeOfTask: number;
    statusId: number;
    created_at: Date;
    updated_at: Date;
    checked: Boolean;
    rowVersion: number;
  }

interface ITaskListItemViewModel{    
        id: number;
        tasklistId: number;
        typeOfTask: number;
        statusId: number;
        created_at: Date;
        updated_at: Date;
        checked: Boolean;
        rowVersion: number;
      }
угловая, машинопись,
Похожие вопросы