Question

我希望在打开Modal时要更新的数据填写数据输入字段。 我将更新表中的一行数据。我用“更新”按钮打开一个模式。模态在打开时也应接收数据。

ANGULAR COMPONENT.TS

import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
...
constructor(private modalService: NgbModal){...}

//Modal
open(content, modalType) {
        this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', centered: true, size: 'lg', scrollable: true }).result.then((result) => {
            //When Modal Submit
        }, (reason) => {
            //When Modal Close
        }); }

HTML UpdateButton

<a mat-raised-button class="btn customBlueButton leftButton" style="" (click)="open(updateModal,'update');"><i class="fa fa-edit" aria-hidden="true"></i></a>

HTML 模式

<!--Update Modal-->
<ng-template #updateModal let-modal id="updateModal">
    <div class="modal-header" style="background:linear-gradient(40deg,#45cafc,#303f9f) !important;">
        <h4 class="modal-title" id="modal-basic-title" style="color: white !important;">
            Strateji Güncelle
        </h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()" style="color:white !important;">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <form>
            <div class="form-group">
                <label class="control-label">Strateji Adı:</label>
                <input type="text" id="name" #name class="form-control"/>
            </div>
            <div class="form-group">
                <label class="control-label">Açıklama:</label>
                <input type="text" id="desc" #desc class="form-control" />
            </div>
            <div class="form-group">
                <label class="control-label">Parametreler:</label>
                <input type="text" id="param" #param class="form-control" placeholder="Örn : SAR Periyot 1,Sar Periyot 2, Lot" />
            </div>
            <div class="form-group">
                <label class="control-label">Tip:</label>
                <select id="type" #type class="form-control">
                    <option value='Basit'>Basit</option>
                    <option value='Orta'>Orta</option>
                    <option value='Zor'>Zor</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label">Strateji Kodu:</label>
                <textarea class="md-textarea form-control" rows="10" #code></textarea>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn customBlueButton" (click)="modal.close({'name':name.value,'desc':desc.value,'param':param.value,'type':type.value,'code':code.value})">Güncelle</button>
        <button type="button" class="btn customRedButton" (click)="modal.dismiss()">Kapat</button>
    </div>
</ng-template>

（角度引导程序模式）以数据打开

0 个答案: