CODEWITHSUNDEEP
angular
shoopik
shoopik

Reputation: 309

angular 2 todo list cant fint issue that dont show me new

i am trying to do "todo-list' and new 'todo' dont add, so there is no any error in console. i can not find the reason why it doesnt work , here is my code: It is code from component.ts

    export class TableComponent {
      newName: any;
        newDate: any;
        newInput: any;
        newOutput: any;
        newProfit: any;
        list: any;
        listObj: any;

        constructor() {
          this.newName = '';
          this.newDate = '';
          this.newInput = '';
          this.newOutput = '';
          this.newProfit = '';
          this.list = [];
        }

        addOperation(event) {
          this.listObj = {
            newName: this.newName,
            newDate: this.newDate, 
            newInput: this.newInput, 
            newOutput: this.newOutput, 
            newProfit: this.newProfit   
          }
          this.list.push(this.listObj);
          this.newName = '';
          this.newDate = '';
          this.newInput = '';
          this.newOutput = '';
          this.newProfit = '';
          event.preventDefault();
   }
   }

and here is .html file: 

  <div><form (submit)="addOperation($event)">
 <input [(ngModel)]="newName"  class="textfield" name="newName">
 <input [(ngModel)]="newDate"  class="textfield" name="newDate">
 <input [(ngModel)]="newInput"  class="textfield" name="newInput">
 <input [(ngModel)]="newOutput"  class="textfield" name="newOutput">
 <input [(ngModel)]="newProfit"  class="textfield" name="newProfit">
 <button  type="submit">Add Todo</button>
 </form>
 <table>
    <tr *ngFor="let item of list; index as i; first as isFirst" border="1">
        <td>{{item.NewName}}</td><td>{{item.NewDate}}</td><td>{{item.NewInput}}</td><td>{{item.NewOutput}}</td><td>{{item.NewProfit}}</td>
    </tr>
 </table>
 </div>

Hope someone can help me, thank you )

Update1:
when i use {{item | json it show me in json format like { "newName": "123", "newDate": "", "newInput": "", "newOutput": "", "newProfit": "" }

Update2: after adding in console i see like this : Cannot read property 'NewOutput' of undefined

Upvotes: 0

Views: 27

Answers (2)

Hristo Eftimov
Hristo Eftimov

Reputation: 15773

The problem is in the incorrect object name. You are trying to access the property of the object with uppercase NewName, but they are declared with lowercase newName. Your *ngFor has to be:

<tr *ngFor="let item of list; index as i; first as isFirst" border="1">
      <td>{{item.newName}}</td>
      <td>{{item.newDate}}</td>
      <td>{{item.newInput}}</td>
      <td>{{item.newOutput}}</td>
      <td>{{item.newProfit}}</td>
 </tr>

Upvotes: 1

YounesM
YounesM

Reputation: 2317

First of all, Javascript / Typescript is case sensitive, so {{item.NewName}} should be {{item.newName}} in order to work.

Other than that, you're using the wrong syntax to keep track of the index. You should use let to declare you index :

<table>
    <tr *ngFor="let item of list; let i = index; let isFirst = first" border="1">
        <td>{{item.newName}}</td><td>{{item.newDate}}</td><td>{{item.newInput}}</td><td>{{item.newOutput}}</td><td>{{item.newProfit}}</td>
    </tr>
</table>

Working Plnkr : Plunker

Upvotes: 1

Related Questions