Блог

Я получаю массив json из api.

 [
    {
        id: 1,
        parentId: null,
        name: 'category 1' 

    },
    {
        id: 2,
        parentId: null,
        name: 'category 2' 

    }
]
  

итак, после получения этих данных я использую этот идентификатор и вызываю API для получения дочерних элементов.

 [
    {
        id: 11,
        parentId: null,
        name: 'category 1 child 1' 

    },
    {
        id: 12,
        parentId: null,
        name: 'category 1 child 2' 

    }
]
  

далее я использую идентификатор этих дочерних элементов, чтобы получить дочерние элементы.

 [
    {
        id: 21,
        parentId: null,
        name: 'child 1 sub child 1' 

    },
    {
        id: 22,
        parentId: null,
        name: 'child 1 sub child 2' 

    }
]
  

итак, у каждого дочернего элемента есть свои собственные дочерние элементы. окончательное то, что я хочу.

 [
    {
        id: 1,
        parentId: null,
        name: 'category 1',
        children: [
            {
                id: 11,
                parentId: null,
                name: 'category 1 child 1',
                [
                    {
                        id: 11,
                        parentId: null,
                        name: 'category 1 child 1',
                        children: // further children  

                    },
                    {
                        id: 12,
                        parentId: null,
                        name: 'category 1 child 2',
                        children: // further children

                    }
                ] 

            },
            {
                id: 12,
                parentId: null,
                name: 'category 1 child 2',
                children: // same as above 

            }
        ] 

    },
    {
        id: 2,
        parentId: null,
        name: 'category 2' 

    }
]
  

чего я пытаюсь достичь, так это моей категории и дочерних интерфейсов и моделей

 export interface ICategory {
  id?: any;
  parentId?: number;
  name?: string;
  children: Children[]
}

export class Category implements ICategory {
  public id?: any;
  public parentId?: number;
  public name?: string;
  public children: Children[]

  constructor(data: ICategory) {
    Object.assign(this, data);
  }
}


export interface IChildren {
  id?: any;
  parentId?: number;
  name?: string;
  children: Children[]
}

export class Children implements IChildren {
  public id?: any;
  public parentId?: number;
  public name?: string;
  public children: Children[]

  constructor(data: IChildren) {
    Object.assign(this, data);
  }
}
  

Пожалуйста, помогите мне, я новичок в angular и typescript.
Спасибо

Нет необходимости создавать несколько интерфейсов, достаточно одного интерфейса. Я просто даю вам предложение с type приведенным ниже, и вы можете проверить stackblitz, чтобы попытаться добавить больше дочерних элементов

Просто введите дочерние элементы также как ICategory массив -> ICategory[]

 export type Category = {
  id: number;
  parentId: null | number;
  name: string;
  children: Category[];
};

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular "   VERSION.major;

  objs: Category[] = [{
    id: 1,
    parentId: 0,
    name: "parent 1",
    children: [{
      id: 2,
      parentId: 1,
      name: "Child 1",
      children: [{
        id: 3,
        parentId: 2,
        name: "Sub Child 1",
        children: []
      }]
    }]
  }];
}
  

Вам нужен только один интерфейс, и в TypeScript мы не используем префикс I, как в соглашениях C # / JAVA.

Вот начальная функция, ей нужно добавить дочерний элемент. Я мог бы закончить это позже, но мне нужно идти.

 export interface Category {
  id?: any;
  parentId?: number;
  name?: string;
  children: Category[]
}
  

 const first = [
    {
        id: 1,
        parentId: null,
        name: 'category 1' 
    },
    {
        id: 2,
        parentId: null,
        name: 'category 2' 

    }
];

const second = [
    {
        id: 11,
        parentId: null,
        name: 'category 1 child 1' 

    },
    {
        id: 12,
        parentId: null,
        name: 'category 1 child 2' 

    }
];

const third = [
    {
        id: 21,
        parentId: null,
        name: 'child 1 sub child 1' 

    },
    {
        id: 22,
        parentId: null,
        name: 'child 1 sub child 2' 
    }
];

const addChildren = (parent, child) => parent.reduce((results, current) => {
  const children = child.find(c => c.name.endsWith('child '   current.id));
  results.push({ ...current, children: children });
  return results;
}, []);

console.log(addChildren(first, addChildren(second, third)));  

Вы можете использовать библиотеку class-transformer . Отличный пакет, который упрощает создание модели данных.

Пример:

 import { Type } from 'class-transformer';

export class Employee {
    firstName: string;
    email: string;
    days: string;
    hours: string;

    @Type(() => Availability)
    availablity: Availablity

    constructor(args: Employee) {
      Object.assign(this, args);
    }
}

export class Availability {
    days: string;
    hours: string;

    constructor(args: Availability) {
      Object.assign(this, args);
    }
}
  

Как вы можете видеть, с помощью этого пакета мы можем использовать type декоратор, который позволяет нам преобразовывать вложенный объект. Вы можете ознакомиться с более подробной информацией здесь.

Лично я нахожу этот способ реализации моделей данных более подходящим, чем любые другие, поскольку он более правильно определен.