Блог

Главная - Вопросы по программированию - Почему ng2-дерево показывает неопределенное

Почему ng2-дерево показывает неопределенное

#javascript #angular

Вопрос:

Я использую ng2-tree https://angular2-tree.readme.io/v3.2.0/docs/inputs плагин

Когда я ввожу данные ниже json , они отображаются как неопределенные

 [
    {
        "value": "helper",
        "name": "helper",
        "children": []
    },
    {
        "value": "taxi",
        "name": "taxi",
        "children": []
    },
    {
        "value": "Cake",
        "name": "Cake",
        "children": [
            {
                "name": "Chocolate Fudge Cake",
                "value": "Chocolate Fudge Cake"
            },
            {
                "name": "Carrot amp; Walnut Cake",
                "value": "Carrot amp; Walnut Cake"
            }
        ]
    }
]

с приведенным выше json мой результат таков, как undefined вы можете видеть их по моей ссылке ниже

вот ссылка на stackblitz: https://stackblitz.com/edit/angular-ng2-tree-aouyza?file=app/app.component.ts

Пожалуйста, помогите мне, заранее спасибо!!

Ответ №1:

Ваша структура данных неверна. tree Компонент, полученный в качестве входного параметра a TreeModel , и в данный момент у вас есть массив TreeModel s.

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

 tree: TreeModel = {
  value: 'Parent Model',
  children: [
    {
      value: 'helper',
      name: 'helper',
      children: [],
    },
    {
      value: 'taxi',
      name: 'taxi',
      children: [],
    },
    {
      value: 'Cake',
      name: 'Cake',
      children: [
        {
          name: 'Chocolate Fudge Cake',
          value: 'Chocolate Fudge Cake',
        },
        {
          name: 'Carrot amp; Walnut Cake',
          value: 'Carrot amp; Walnut Cake',
        },
      ],
    }
  ]
};

Или вы перебираете массив в HTML и используете несколько tree компонентов. Это выглядело бы следующим образом:

 <tree [tree]="t" *ngFor="let t of tree"></tree>

Для получения дополнительной информации см. страницу Github в ng2-tree 😉

Обновить:

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

HTML

 <tree [tree]="tree" [settings]="{ rootIsVisible: false }"></tree>

Благодаря этому параметру rootless применяется класс, который скрывает корневой узел empyt, но только в том случае, если вы добавили node_modules/ng2-tree/styles.css в свой angular.json или добавили пользовательскую реализацию для этого класса.

Вы можете найти документ с настройками здесь.

Комментарии:

1. Если я хочу 3 основные категории(родители), то с ng2-деревом нет возможности? Так ли это ?

2. теперь он приближается к 3 узлу, но все еще не определен, вы можете увидеть здесь stackblitz.com/edit/angular-ng2-tree-aouyza?file=app/…

3. Потому что вам нужно настроить свою модель так, чтобы она была a TreeModel , как я предлагал в начале своего ответа. Если вы это сделаете, это сработает

4. я понял вашу точку зрения, но TreeModel структура такова {{...},{...},{...}} , что я не знаю, как динамически создавать такого рода массивы TreeModel с таким типом [{...},{...},{...}] .

5. Вы можете добавить каждый из ваших объектов в свойство roots children . В этом случае только корень будет статичным

Метки: