使用角度4动态创建表中的行

Question

我正在使用角度4。我有一个表格，我想要动态添加行。我已经阅读了之前的答案，并想出了一个解决方案。但它不起作用。

这是我的HTML代码

<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>

这是我的component.ts代码（此组件不是应用程序组件）

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

当我点击表格中的添加按钮时，会发出错误“无法读取属性'推送'未定义”

提前致谢

Answer 1

您需要初始化import UIKit class ViewController: UIViewController { @IBOutlet weak var stackYellowBox: UIView! @IBOutlet weak var stackBlueBox: UIView! @IBOutlet weak var yellowBox: UIView! @IBOutlet weak var blueBox: UIView! override func viewDidLoad() { super.viewDidLoad() setupStackShadows() setupNormalShadows() } private func setupStackShadows() { stackYellowBox.layer.masksToBounds = false stackYellowBox.layer.shadowColor = UIColor.black.cgColor stackYellowBox.layer.shadowOpacity = 0.5 stackYellowBox.layer.shadowOffset = CGSize(width: 10, height: 10) stackYellowBox.layer.shadowRadius = 1 stackYellowBox.layer.shadowPath = UIBezierPath(rect: stackYellowBox.bounds).cgPath stackYellowBox.layer.shouldRasterize = true stackYellowBox.layer.rasterizationScale = UIScreen.main.scale stackBlueBox.layer.masksToBounds = false stackBlueBox.layer.shadowColor = UIColor.black.cgColor stackBlueBox.layer.shadowOpacity = 0.5 stackBlueBox.layer.shadowOffset = CGSize(width: 10, height: 10) stackBlueBox.layer.shadowRadius = 1 stackBlueBox.layer.shadowPath = UIBezierPath(rect: stackBlueBox.bounds).cgPath stackBlueBox.layer.shouldRasterize = true stackBlueBox.layer.rasterizationScale = UIScreen.main.scale } private func setupNormalShadows() { yellowBox.layer.masksToBounds = false yellowBox.layer.shadowColor = UIColor.black.cgColor yellowBox.layer.shadowOpacity = 0.5 yellowBox.layer.shadowOffset = CGSize(width: 10, height: 10) yellowBox.layer.shadowRadius = 1 yellowBox.layer.shadowPath = UIBezierPath(rect: yellowBox.bounds).cgPath yellowBox.layer.shouldRasterize = true yellowBox.layer.rasterizationScale = UIScreen.main.scale blueBox.layer.masksToBounds = false blueBox.layer.shadowColor = UIColor.black.cgColor blueBox.layer.shadowOpacity = 0.5 blueBox.layer.shadowOffset = CGSize(width: 10, height: 10) blueBox.layer.shadowRadius = 1 blueBox.layer.shadowPath = UIBezierPath(rect: blueBox.bounds).cgPath blueBox.layer.shouldRasterize = true blueBox.layer.rasterizationScale = UIScreen.main.scale } } 数组：

details