Angular / HTML - будет отображаться полный JSON, но не может отображаться только один атрибут

Question

В настоящее время я могу отобразить полный массив JSON, выполнив {{Groups | json}}.

На моей html-странице оно будет отображаться так:

[ { "Id": 3, **"Name": "Name I"**, "Group_Name": "Group I" } ]

Положите, если я сделаю {{Groups.Name}}, я получаю следующую ошибку:

ERROR TypeError: Cannot read property 'Name' of undefined
at Object.eval [as updateRenderer]

Однако, если я пойду, чтобы отобразить это в списке, используя * ng, он будет отлично работать.

<select class="form-control">
<option *ngFor="let Group of Groups">{{ Groups.Name }}</option>
</select>

Есть идеи, что происходит? Этот JSON может иметь только 1 запись. Если я сделаю {{Groups [0] .Name}}, данные отобразятся, но я получу следующую ошибку.

ERROR TypeError: Cannot read property '0' of undefined
at Object.eval [as updateRenderer] (

Моя цель - просто отобразить слово «Имя I» на моей странице HTML. «Имя I» исходит из групп массивов из значения «Имя».

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

Answer 1

Похоже, группы представляют собой массив объектов в виде пары "ключ": "значение".

Вы должны иметь доступ к значению с помощью

<span>{{ Groups[0]["Name"] }}</span>

или

<span>{{ Groups[0].Name }}</span>

Answer 2

Изменение

<option *ngFor="let Group of Groups">{{ Groups.Name }}</option>

до

<option *ngFor="let Group of Groups">{{ Group.Name }}</option>

, поскольку Groups - это массив, к которому вы не можете получить доступ ни к какому свойству. Вот почему вы видите Cannot read property 'Name' of undefined

Более того, здесь *ngFor="let Group of Groups" вы выполняете итерацию для каждого объекта / элемента в массиве Groups. Как это работает, проще говоря, он берет элементы массива один за другим и присваивает его Group, поэтому вы должны обращаться к свойствам этого элемента. Как я уже говорил выше

 <option *ngFor="let Group of Groups">{{ Group.Name }}</option>