角度6：如何使用角度6在按钮单击上动态添加和删除2个文本框的行

Question

我有一个角度项目，用户可以单击添加按钮来在每次单击时产生两个以上的文本框，并类似地删除按钮单击时的相应行。应允许最多创建5行，并允许一个默认的空行文本框开头。

输入的数据需要用于2种方式的数据绑定，但在编辑时可能会有所帮助。

以下代码是我从此处获得的，我用数字对其进行了修改，但具有所需的功能，但是我需要在angular 6中使用相同的功能。由于我在jquery中的想法较少，并且是angular的新手，请使用插件帮助我一开始就将默认的一行文本框作为条件。

var x=1;
var count=0;

//click Event for the add button
$('body').on('click','#add',function(){
  if(count <= 5){
    //add the two inputs + the reset button to a div with class 'line' then append 
    //this div to #div

    $('#div').append("<div class='line'><input type='text' id='txta"+ x +"'><span class='wordtab'></span><input type='text' id='txtb"+ x +"'><button class='delete' value='Reset'>Reset</button></div>");
    count++;
    x++
  }
  else
    alert("Maximum 5 Skills");
});

//click Event for the delete button
$('body').on('click','.delete',function(){

  //when the user click on delete get the parent div with class 'line' of clickable 
  //button and remove it

  $(this).closest('.line').remove(); 
  count--;
});

.wordtab 
{
  min-width: 85px; 
  display: inline-block;
}

.line{
  margin-bottom: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div"></div>
<button id='add' value="Add Row">Add Row</button>

提前感谢：）

Answer 1

请按照以下过程使用角度6/7添加动态内容：

安装bootstrap和Toaster，因为我们将使用以下命令来进一步使用它：

npm install bootstrap  

npm install ngx-toastr --save

在angular.json文件中添加引导程序和烤面包机的参考。

"Styles":[
   "node_modules/bootstrap/dist/css/bootstrap.css",
   "node_modules/ngx-toastr/toastr.css",
]

4。使用以下命令创建新组件

ng g c grid-view --routing

键入以下命令以为该类生成模型文件。

ng g class grid.model

6。打开根文件夹中存在的app.module.ts文件，并在其中添加引用。import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
import { ToastrModule } from 'ngx-toastr';  
import { AppRoutingModule } from './app-routing.module';  
import { AppComponent } from './app.component';  
import { GridViewComponent } from './grid-view/grid-view.component';  
import { FormsModule } from '@angular/forms';  
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  

@NgModule({  
  declarations: [  
    AppComponent,  
    GridViewComponent,  
  ],  
  imports: [  
    BrowserModule,  
    AppRoutingModule,  
    FormsModule ,  
    BrowserAnimationsModule,  
    ToastrModule.forRoot()  
  ],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule { }

7。打开app.component.html文件，并在其中添加代码。<div class="container">     
     <app-grid-view></app-grid-view>    
 </div>

8。打开index.html文件，并添加字体真棒的引用。（如果要使用字体真棒图标）。<!doctype html>    
<html lang="en">    
<head>    
  <meta charset="utf-8">    
  <title>DynamicGrid</title>    
  <base href="/">    

  <meta name="viewport" content="width=device-width, initial-scale=1">    
  <link rel="icon" type="image/x-icon" href="favicon.ico">    
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">    
</head>    
<body>    
  <app-root></app-root>    
</body>    
</html>

9。打开grid.model.ts文件并在其中添加类。export class DynamicGrid{     
    title1:string;  
    title2:string;  
    title3:string;  
}

10。打开grid-view.component.html文件，在其中添加HTML代码。
<div class="container" style="margin-top: 5%">    
    <table class="table table-striped table-bordered">    
        <thead>    
            <tr>    
                <th>Action</th>    
                <th>Title 1</th>    
                <th>Title 2</th>    
                <th>Title 3</th>    
            </tr>    
        </thead>    
        <tbody>    
             <tr *ngFor="let dynamic of dynamicArray; let i = index;">    
              <td (click)="deleteRow(i)">    
                <i class="fa fa-trash fa-2x"></i>    
              </td>    
                <td>    
                  <input [(ngModel)]="dynamicArray[i].title1" class="form-control" type="text" />    
                </td>    
                <td>    
                  <input [(ngModel)]="dynamicArray[i].title2" class="form-control" type="text" />    
                </td>    
                <td>    
                  <input [(ngModel)]="dynamicArray[i].title3" class="form-control" type="text"/>    
                </td>    
            </tr>    
            <tr>    
              <td (click)="addRow(i)">    
                <i class="fa fa-plus fa-2x"></i>    
              </td>    
            </tr>    
        </tbody>    
    </table>    
  </div>

11。最后，为grid-view.component.ts文件编写以下代码。import { Component, OnInit } from '@angular/core';  
import { ToastrService } from 'ngx-toastr';  
import { DynamicGrid } from '../grid.model';  

@Component({  
  selector: 'app-grid-view',  
  templateUrl: './grid-view.component.html',  
  styleUrls: ['./grid-view.component.css']  
})  
export class GridViewComponent implements OnInit {  

  constructor(private toastr: ToastrService) { }  

  dynamicArray: Array<DynamicGrid> = [];  
  newDynamic: any = {};  
  ngOnInit(): void {  
      this.newDynamic = {title1: "", title2: "",title3:""};  
      this.dynamicArray.push(this.newDynamic);  
  }  

  addRow(index) {    
      this.newDynamic = {title1: "", title2: "",title3:""};  
      this.dynamicArray.push(this.newDynamic);  
      this.toastr.success('New row added successfully', 'New Row');  
      console.log(this.dynamicArray);  
      return true;  
  }  

  deleteRow(index) {  
      if(this.dynamicArray.length ==1) {  
        this.toastr.error("Can't delete the row when there is only one row", 'Warning');  
          return false;  
      } else {  
          this.dynamicArray.splice(index, 1);  
          this.toastr.warning('Row deleted successfully', 'Delete row');  
          return true;  
      }  
  }  

}

您也可以点击链接：https://www.c-sharpcorner.com/article/dynamically-add-and-remove-row-in-angular-7/

角度6：如何使用角度6在按钮单击上动态添加和删除2个文本框的行

问题描述投票：0回答：1

1个回答

最新问题

角度6：如何使用角度6在按钮单击上动态添加和删除2个文本框的行

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1