CODEWITHSUNDEEP
htmlangulartypescriptpipe
Baiano42
Baiano42

Reputation: 33

Html [object Object] in Angular Typescript

I have a todo that takes as inputs:

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>

where the tags are of type: string. When I try to display it in my Html using {{ todo.tags }}, it gives me [object Object]. Additionally, when I use a pipe to convert to json using the html code above, I get:

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

How can I change the {{ }} to just give me the string from the todo.tags when I iterate through my list of todos?

For reference, todosFiltered() returns the following:

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);
    }
}

Upvotes: 0

Views: 1192

Answers (1)

Alex D
Alex D

Reputation: 692

Since tags is an array, you'll need something to iterate through it.

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

Here tag will be just one entry of the array of tags, for instance

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

Upvotes: 1

Related Questions