Angular 6: как динамически добавлять и удалять строки из 2 текстовых полей одним нажатием кнопки, используя angular 6 - PullRequest
Новая
       9

Angular 6: как динамически добавлять и удалять строки из 2 текстовых полей одним нажатием кнопки, используя angular 6

0 голосов
/ 23 апреля 2020

У меня есть проект angular, в соответствии с которым пользователи могут нажимать на кнопку добавления, чтобы при каждом нажатии создавать еще 2 текстовых поля, и аналогичным образом удалять соответствующую строку при нажатии кнопки. Можно создать максимум 5 строк и одну по умолчанию. пустая строка текстовых полей в начале.

Введенные данные необходимо использовать для двухстороннего связывания данных, хотя это может быть полезно при редактировании.

Следующий код, который я получил отсюда, у меня есть измененный немного с числами обладает необходимой функциональностью, но мне нужно то же самое в 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>

Заранее спасибо:)

1 Ответ

0 голосов
/ 25 апреля 2020

Пожалуйста, следуйте приведенной ниже процедуре для добавления динамического c контента с использованием angular 6/7:

  1. Создайте новый angular проект.
  2. Установите bootstrap и Toaster, поскольку мы собираемся использовать его далее, используя следующую команду: 
npm install bootstrap  

npm install ngx-toastr --save
добавить ссылку на bootstrap и тостер в файл 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, находящийся в папке root, и добавьте туда ссылки. 

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.Open app.component . html файл и добавьте в него код. 

<div class="container">     
     <app-grid-view></app-grid-view>    
 </div>

8. Откройте файл index. html и добавьте ссылку на font-awesome. (Если вы хотите использовать шрифт awesome icons) . 

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

...