Angular 2 Interpolation for array not working

Question

Hi All i am new to Angular 2 and trying to build sample Todo app but i am stuck in middle. My interpolation for array is not working. Please help.

This is my AppComponent.

import { Component,OnInit } from '@angular/core';
import { Todo } from './todo';
import { TodoDataService } from './todo-data.service';
@Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          providers:[TodoDataService],
          styleUrls: ['./app.component.css']
        })
export class AppComponent implements OnInit{
   title = 'app';
   todos:Todo[];

constructor(private todoDataService : TodoDataService){
    this.todos=[];
    let todon:Todo=new Todo();
    todon.titile=this.title;
    this.todos.push(todon);
}    

addToDo(title:string){
       let todon:Todo=new Todo();
       todon.titile=title;
       this.todos.push(this.todoDataService.addTodo(todon));
       console.log(this.todos);
}   
ngOnInit() {
  this.todos=[];
 }
}

My AppModule is as follows:

 import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { TodoDataService } from './todo-data.service';

    import { AppComponent } from './app.component';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule
      ],
      providers: [TodoDataService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

My Todo class:

export class Todo {
     id:number;
     titile:string='';
     complete:boolean;

     constructor(values:Object={}){
                Object.assign(this,values);
     }
}

My TodoDataService class

    import { Injectable } from '@angular/core';
    import { Todo } from './todo';

// Here i am just incrementing lastid and returing new todo object each time
    @Injectable()
    export class TodoDataService {

        lastId:number =0;



      constructor() { }


      addTodo(todo:Todo):Todo{
        console.log(todo);
        if(!todo.id)
            todo.id = ++this.lastId;

        return todo;
      }

    }

Finally html file

<!--My input text field and ngIf and ngFor directives-->
<div style="text-align:center">
<input type="text" (keyup.enter)="addToDo(inputtext.value)" #inputtext>

<!-- <div *ngIf="todos.legnth > 0">
<ul>
<li *ngFor="let todo of todos">
<label>{{todo.title}}</label>
</li>
</ul>
</div> -->


</div>


<div>
<p>{{ todos }}</p>
</div>

As you can see above i tried all things but it is not getting displayed. Also i want to display all array data only if my array size is greater than 0. That also not working. Please provide your valuable inputs and suggestions.

you also have two typos - you set 'titile' in the Todo class, but try to display '.title' in the view. And you also have todos.legnth instead of todos.length — glendaviesnz
– glendaviesnz, Commented Jul 2, 2017 at 6:49
yes this was the error thanks for help. It was silly mistake from my side. — Sarang Shinde
– Sarang Shinde, Commented Jul 2, 2017 at 12:00

Aravind · Accepted Answer · 2017-07-02 06:46:58Z

4

Because of

<!-- <div *ngIf="todos.legnth > 0">

In your constructor you are pushing only one value

this.todos.push(todon);

So length 1. Again in the ngOnInit you are clearing it to

this.todos = [];

so length is 0 again. Hence you will not be seeing the data.

Even when you are adding new Todos using the below method

addTodo(todo:Todo):Todo{

you are not pushing the todo to the this.todos array.

answered Jul 2, 2017 at 6:46

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sarang Shinde Over a year ago

hi Aravind i am adding addTodo(todo:Todo):Todo{ into addTodo(titile:string) method as this.todos.push(this.todoDataService.addTodo(todon)); also i tried removing empty assignment from nginit then also it is not working.

Aravind Over a year ago

@Enthu I partially understood your question, we can chat if you are free!

Enthu Over a year ago

@Aravind, I have updated the above post link with stackblitz with exact issue :) , please let me know when can we discuss, thanks alot, when u see in the stackblitz the latest top, left value doesnt get reflected when I drop and move the boxes , it hsows only the first initial top,left value

Enthu Over a year ago

Rest of the boxes shows only the first initial top,left value not the latest one and the first box doesnt show any value, so issue is interpolated values not showing the latest values, this is the crux :)

Enthu Over a year ago

@Aravind , I have posted with exact issue in stackblitz in the above post , please help me out, thanks

TOUZENE Mohamed Wassim · Accepted Answer · 2017-07-02 10:25:50Z

2

First, you must uncomment the block

<!-- <div *ngIf="todos.legnth > 0">
<ul>
<li *ngFor="let todo of todos">
<label>{{todo.title}}</label>
</li>
</ul>
</div> -->

And correct the syntax of todos.length : it is not legnth

answered Jul 2, 2017 at 10:25

TOUZENE Mohamed Wassim

7128 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular 2 Interpolation for array not working

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related