Блог

Главная - Вопросы по программированию - Html [объект объекта] в угловом машинописном тексте

Html [объект объекта] в угловом машинописном тексте

#html #angular #typescript #pipe

Вопрос:

У меня есть задание, которое принимает в качестве входных данных:

todo.ts:

 import { TodoTag } from "./todo-tag-custom";

export class Todo {
  ...
  tags: TodoTag[];
}

todo.html

 <tr *ngFor="let todo of todosFiltered()">
<td>{{todo.tags | json}}</td>

где теги имеют тип: строка. Когда я пытаюсь отобразить его в своем Html-коде {{ todo.tags }} , он выдает меня [object Object] . Кроме того, когда я использую канал для преобразования в json, используя приведенный выше html-код, я получаю:

 [ { "id": 1, "tags": "Hello World", "todoID": 1 }, { "id": 2, "tags": "Not my 
tag", "todoID": 1 } ]

Как я могу изменить {{ }}, чтобы просто дать мне строку из тегов todo., когда я повторяю свой список задач?

Для справки, функция todosFiltered() возвращает следующее:

 todosFiltered(): Todo[] {
    if (this.filter === 'all') {
      return this.todos;
    } else if (this.filter === 'active') {
      return this.todos.filter(todo => !todo.done);
    } else if (this.filter === 'done') {
      return this.todos.filter(todo => todo.done);
    }
}

Ответ №1:

Поскольку tags это массив, вам понадобится что-то для его перебора.

 <tr *ngFor="let todo of todosFiltered()">
    <td>
        <span *ngFor="let tag of todo.tags">{{ tag.tags }}</span>
    </td>
</tr>

Здесь tag будет только одна запись массива тегов, например

 { "id": 1, "tags": "Hello World", "todoID": 1 }

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

1. Не уверен, что это сработало. Указанный вами интервал вернул следующие элементы: <!—привязки={ «ng-отражение-ng-для-из»: «[объект объекта],[объект объекта» }—>

2. Основываясь на предоставленном вами коде, это должно сработать. Как выглядят todosFiltered() возвращаемые данные? Не могли бы вы console.log(todosFiltered()) где-нибудь в своем коде показать мне, как это выглядит?

3. Это выглядит так: todosFiltered(): TodoCustom[] { если (этот.фильтр === ‘все’) { вернет этот.todos; } иначе, если (этот.фильтр === ‘активен’) { вернет этот.todos. фильтр(todo => !todo.готово); } иначе, если (this.filter === «готово») { верните this.todos. фильтр(todo => todo.готово); } Куда мне поместить console.log(todosFiltered())? (Я довольно новичок и никогда не использовал его раньше…) (См. Отредактированный код выше)

4. Мое замешательство происходит от export class Todo { ... tags: TodoTag[]; } того, а затем «где теги имеют тип: строка». Вы говорите tags , что это строка, но в предоставленном вами коде она представлена в виде массива в классе Todo. Поэтому, если todosFiltered возвращает несколько Todo s, то tags это массив. Поэтому вам нужно продолжить итерацию по тегам с *ngFor помощью, а затем получить свойство «теги» в Todo.tags, чтобы получить строку.

5. Итак, ваш метод todosFiltered возвращает массив Todos , который из вашего кода выглядит следующим образом: [ { tags: [ { "id": 1, "tags": "Hello World", "todoID": 1 } ] } ] , итак, вы видите, что существует 2 массива? Тогда вам нужно 2 *ngFor с

Метки: