Question

我正在一个Angular 6项目中工作，其中有20个左右的州，城市，付款模式等多个主数据库。我必须使用bootstrap POP up模型为每个主数据库创建CRUD。

请让我知道我应该使用哪种方法来创建此

我的方法：目前，我正在为此使用引导程序，并为State和一个模板文件添加了一个组件。

在此模板文件中，我为每次添加，编辑和删除添加了模型POPUP。状态列表也显示在这里

但是当我添加1个成员时，我出现了问题，我需要关闭已打开的弹出窗口，但未关闭。我已经尝试过通过ID不显示任何内容，但是覆盖层仍然存在。另外，由于我已经在列表中，所以无法将其重定向到列表页面

我正在使用反应形式，因此当我单击“删除行”时，无法设置删除ID。我已经使用javascript函数对其进行了设置，但是当我单击删除表单时并没有得到它。

请提出一种更好的实时方法。

下面是我的一些代码。

组件

import {Component} from "@angular/core";
import {FormBuilder,FormGroup, FormControl,Validators,NgForm} from "@angular/forms";
import { StateService } from "../shared/state.service";

@Component({
    selector :'app-root',
    templateUrl:'state.html',
    providers : [StateService]
})
export class stateCompCls{  
    stateArr = [];
    addNewForm : FormGroup;
    editForm : FormGroup;
    deleteForm : FormGroup;
    constructor(private service : StateService,private fb:FormBuilder){


        this.addNewForm = fb.group({
            state_name : new FormControl()
        })
        this.addNewForm= fb.group({  
            state_name:['',Validators.compose([Validators.required,Validators.minLength(4)])]                          
          })

        this.editForm = fb.group({
            state_name : new FormControl()
        })
        this.deleteForm = fb.group({            
            delete_id:new FormControl()
        })

    }

    ngOnInit(){
        this.getAllState();
    }


    getAllState(){
        this.service.getStates().subscribe(e=>{
            this.stateArr = e[0];                        
        })
    }

    PostData(addNewForm:NgForm) 

    {  
        var object = {"state_name":addNewForm.value.state_name}
        this.service.addState(object).subscribe();
        this.getAllState();        

    }  

    deleteFormSubmit(deleteForm:NgForm) 

    {  
        console.log(deleteForm.value); // delete id is null here
        var object = {"state_id":deleteForm.value.delete_id}
        //this.service.deleteState(object).subscribe();

    }      


}

模板

<div class="container">
    <div class="table-wrapper">
        <div class="table-title">
            <div class="row">
                <div class="col-sm-6"><h3><b>Manage States</b></h3></div>                
                <div class="col-sm-6">
                    <a href="#addEmployeeModal" class="btn btn-success" data-toggle="modal"><i class="material-icons">&#xE147;</i> <span>Add New State</span></a>
                    <a href="#deleteEmployeeModal" class="btn btn-danger" data-toggle="modal"><i class="material-icons">&#xE15C;</i> <span>Delete</span></a>                        
                </div>
            </div>
        </div>
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>
                        <span class="custom-checkbox">
                            <input type="checkbox" id="selectAll">
                            <label for="selectAll"></label>
                        </span>
                    </th>
                    <th>ID</th>
                    <th>Name</th>                    
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let d of stateArr">
                    <td>
                        <span class="custom-checkbox">
                            <input type="checkbox" id="checkbox1" name="options[]" value="1">
                            <label for="checkbox1"></label>
                        </span>
                    </td>
                    <td>{{d.state_id}}</td>
                    <td>{{d.state_name}}</td>                    
                    <td>
                        <a href="#editEmployeeModal" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
                        <a onclick="someFunction(6);" href="#deleteEmployeeModal"  class="delete deleteModelCls" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>
                    </td>
                </tr>           

            </tbody>
        </table>
        <div class="clearfix">
            <div class="hint-text">Showing <b>5</b> out of <b>25</b> entries</div>
            <ul class="pagination">
                <li class="page-item disabled"><a href="#">Previous</a></li>
                <li class="page-item"><a href="#" class="page-link">1</a></li>
                <li class="page-item"><a href="#" class="page-link">2</a></li>
                <li class="page-item active"><a href="#" class="page-link">3</a></li>
                <li class="page-item"><a href="#" class="page-link">4</a></li>
                <li class="page-item"><a href="#" class="page-link">5</a></li>
                <li class="page-item"><a href="#" class="page-link">Next</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- Add Modal HTML -->
<div id="addEmployeeModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form [formGroup]='addNewForm' (ngSubmit)="PostData(addNewForm)">
                <div class="modal-header">                      
                    <h4 class="modal-title">Add State</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">                    
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text"  formControlName='state_name' class="form-control" required placeholder="State Name">
                        <div *ngIf="addNewForm.controls['state_name'].touched && !addNewForm.controls['state_name'].valid">  

                            <span *ngIf="addNewForm.controls['state_name'].hasError('required') " class="text-danger">  

                                State name is required  

                                </span>  

                                <span *ngIf="addNewForm.controls['state_name'].hasError('minlength') " class="text-danger">  

                                 Min length is 1  

                                </span>
                        </div>  
                    </div>          
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                    <input type="submit" class="btn btn-success" value="Add" [disabled]="!addNewForm.valid">
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Edit Modal HTML -->
<div id="editEmployeeModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form [formGroup]="editForm">
                <div class="modal-header">                      
                    <h4 class="modal-title">Edit Employee</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">                    
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" class="form-control" required>
                    </div>      
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                    <input type="submit" class="btn btn-info" value="Save">
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Modal HTML -->
<div id="deleteEmployeeModal" class="modal fade deleteEmployeeModalCls">
    <div class="modal-dialog">
        <div class="modal-content">
            <form [formGroup]="deleteForm" (ngSubmit)="deleteFormSubmit(deleteForm)">
                <div class="modal-header">                      
                    <h4 class="modal-title">Delete State</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body"> 
                    <p>Are you sure you want to delete this Record?</p>      
                    <input type="text" id="delete_id"  formControlName='delete_id'/>              
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                    <input type="submit" class="btn btn-danger" value="Delete">
                </div>
            </form>
        </div>
    </div>    
</div>

对于设置删除ID，我已经使用了此功能

function someFunction(value){       
            $('#delete_id').val(value);
}

下面是我的屏幕截图

查询：如果我需要为每个操作ADD，EDIT，DELETE添加组件，然后使用ngx-bootstrap来完成此任务，如下面的链接

http://www.mukeshkumar.net/articles/angular/crud-operations-in-angular-with-typescript-using-ngx-bootstrap

但是它将在我的项目中添加更多文件。

请给我建议正确的方法。

Answer 1

您只需要使用angular的内置指令（使用NgIf即可）即可显示/隐藏模型。

Angular 6+中的Bootstrap Modal？

1 个答案: