Разбор файла Json глубокого уровня и отображение данных во внешнем интерфейсе Angular

28.01.2021Рубрика: ВопросыАвтор: admin

У меня есть данные в формате: данные = {ключ1: значение1, ключ2: [{ключ2_1: значение2_1, ключ2_2: значение2_2}], ключ3: значение3,. . . keyn: valuen}

Я хочу проанализировать глубоко выровненный json и отобразить данные в интерфейсе следующим образом, используя Angular 9: key1: value1 \ n (я использую \ n для обозначения новых строк) key2: (любой интервал или отступ) key2_1: value2_1 \ n ключ2_2: значение2_2 \ n ключ3: значение3 \ n. .. keyn: valuen Если кто-то может помочь, я буду очень признателен.

Value: any;
Key: any;
this.Value = Object.entries(this.data)
this.Key = Object.keys(this.data)

<html>
<ul >
    <li *ngFor = "let i of Value">{{i}}</li>
</ul>
</html>

можете ли вы предоставить более конкретный фрагмент кода? есть много способов сделать это. — person Priyankar Bose schedule 28.01.2021

Я добавил HTML-файл и файл машинописного текста. «Я не мог сделать глубокий кошелек. Большое спасибо за обращение. — person Priyankar Bose schedule 29.01.2021

Post Views: 89

См. также: Ожидается, что JsonSerializer.Deserialize вызовет исключение при десериализации другого класса

1 angular angular9 html json typescript

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

Priyankar Bose 28.01.2021 в 00:00
Вероятно, вы можете использовать канал, например json, или создать свой собственный для большего форматирования:
```
<ul>
    <li *ngFor="let k of keys">
        {{k}}:{{data[k] | json}}
    </li>
</ul>
```
https://stackblitz.com/edit/angular-gbflt7?file=src/app/app.component.html.

Спасибо, что поделились со мной кодом! Я думаю, что это не совсем то, что я на это смотрю. Для вложенных пар ключей и значений мне также нужны любые отступы или символы новой строки, которые вместо того, чтобы анализировать все это как json. Это будет смотреться визуально интересно. — person Priyankar Bose; 29.01.2021

@PriyankarBose Я думаю, что тогда вы можете создать свой собственный канал. Поступая так, вы обеспечите единообразный способ решения этой проблемы и в других компонентах в будущем. — person Priyankar Bose; 29.01.2021

! Спасибо за ваш ответ! Не могли бы вы показать пример изготовления трубы? Я хочу сделать его общим. — person Priyankar Bose; 01.02.2021
Ответить

Добавить комментарий