Этот элемент соответствует более чем одному элементу - Angular 4

Здравствуйте, я пытаюсь рекурсивно отобразить список, я получаю следующую ошибку:

Uncaught Error: Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: TreeNodeComponent,TreeNode ("
    [ERROR ->]<tree-node [node] = "categories"></tree-node>
  "): ng:///AppModule/TreeView.html@1:4

Вот как выглядят эти компоненты:

@Component({
  selector: 'tree-node',
  template: `
  <div>{{node.name}}</div>
  <ul>
    <li *ngFor = "let node of node.children">
      <tree-node [node] = "node"></tree-node>
    </li>
  </ul>
`
})
export class TreeNode {
  @Input() node: AdminCategory[];
}


@Component({
  selector: 'categories',
  template: `
    <tree-node [node] = "categories"></tree-node>
  `,
})
export class TreeView {
  categories: AdminCategory[];

  constructor(private store: Store<AppState>, private dialog: MatDialog) {
    store.select('categoryState').subscribe(s => this.categories = s);
  }

  addCategory(category: AdminCategory) {
    this.store.dispatch(new AddCategory(new AdminCategory((category.id + 1), 'qwe', category.id)));
  }
....

Я также добавил их в объявления в app.module.ts. Что здесь не так? Я не получаю это сообщение об ошибке, потому что я не объявил два одинаковых компонента: первый - tree-node, а второй - categories.

что вы имеете в виду, говоря "Я также добавил их в объявления в app.module.ts"? Эти компоненты объявлены дважды в вашем коде?

Kaddath 18.05.2018 11:41

Можете ли вы создать плунжер или коды?

guyaloni 18.05.2018 11:41

Скорее всего, не получится. Вы не можете выполнять рекурсию в шаблоне. (Я не уверен на 100%)

Ritwick Dey 18.05.2018 11:41

@RitwickDey, это то, о чем я подумал сначала, затем я нашел stackoverflow.com/questions/37746516/… (на самом деле, сильно связанный с вопросом)

Kaddath 18.05.2018 11:46

Да, я последовал этому связанному примеру. Вот stackblitz stackblitz.com/edit/angular-msgywe. В любом случае, есть еще одна ошибка, может быть, вы, ребята, не могли бы предложить другой способ сделать это? Я просто хочу отобразить неограниченный вложенный список, когда я нажимаю на элемент, он должен добавлять новый элемент в качестве дочернего элемента, по которому щелкнули

minizibi 18.05.2018 12:02
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
5
2 109
0

Другие вопросы по теме