dynamically create rows in a table using angular 4

Question

I am using angular 4 .I have a table where I want to add rows dynamically .I have read the previous answers and came up with a solution.But its not working.

here is my html code

<table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th style="text-align: center">Pass Type</th>
                                            <th style="text-align: center">Issue Date</th>
                                            <th style="text-align: center">Expiry Date</th>
                                            <th style="text-align: center">Remark</th>
                                            <th>
                                                <a (click)="addRow()" class="btn btn-xs btn-info">
                                                    <i class="glyphicon glyphicon-plus">add</i>
                                                </a>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let item of details;let i=index">
                                            <!-- <td><input type="text" class="form-control" [value]="rpr.SD_DOC_NO"></td>  -->
                                            <td>
                                                <a *ngIf="i!=0" (click)="removeRow(i)" class="btn btn-xs btn-danger">
                                                    <i class="glyphicon glyphicon-remove">X</i>
                                                </a>
                                            </td>
                                            <td>
                                                <input type="text" class="form-control"  name="itemName[{{i}}]" [(ngModel)]="item.permitType">
                                            </td>
                                            <td>
                                                <input type="text" class="form-control"  name="itemName[{{i}}]" [(ngModel)]="item.remark">
                                            </td>
                                            <td>

                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

here is my component.ts code (this component is not the app component)

import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';
import { environment } from "../../environments/environment";
import { VerifySrevices } from "./add-new-services";
import { Router } from '@angular/router';
import { Headers, Http, Response, RequestOptions } from '@angular/http';
import 'rxjs/add/observable/throw';

export interface IDetail {
  permitType: any;
  issueDate: any;
  expiryDate: any;
  remark: any;
  rate: number;
  controlIndex: number;
}


@Component({
  selector: 'app-add-new-application',
  templateUrl: './add-new-application.component.html',
  styleUrls: ['./add-new-application.component.css']
})



export class AddNewApplicationComponent implements OnInit {


  aRows: any = [];
  iRow: number = 0;
  details: IDetail[] ;
  
  
  
   addRow() {
    this.details.push(<IDetail>{controlIndex:this.iRow});
  
   
    
}

when I click add button in the table its giving an error " Cannot read property 'push' of undefined "

Thanks in advance

Daniel W Strimpel · Accepted Answer · 2018-04-19 04:37:55Z

1

You need to initialize your details array:

details: IDetail[] = [];

answered Apr 19, 2018 at 4:37

Daniel W Strimpel

8,5002 gold badges31 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

dynamically create rows in a table using angular 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related