我有点麻烦。我有一个包含7列表格的父组件。第6列中弹出一个NG-Bootstrap模态，触发时会在模态内显示一个表单。
我想发生的是，当从表触发NG-Bootstrap模态时，用户将能够输入数据并提交表单。然后关闭表单，当下一个用户单击模式时，他们将能够查看从下一个显示“查看注释”选项卡中输入的数据。
基本上，模式既是一个选项卡中的表单，又是另一个选项卡中的表单数据的显示器。
我在Angular 6中进行了设置。
有人有建议吗？这是我的代码。
parent.component.html
<div class="row">
<div class="col-xs-12">
<h1>NSX Server UI</h1>
<table>
<thead>
<tr>
<th><span>Rule Name</span></th>
<th><span>Rule Unique ID</span></th>
<th><span>Source</span></th>
<th><span>Destination</span></th>
<th><span>Application/Service</span></th>
<th><span>Action</span></th>
<th><span>Comments</span></th>
<th><span>Last Hit</span></th>
<th><span>Comments Viewer</span></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of data">
<td>{{item.last_hit}}</td>
<td>{{item.rule_unique_ID}}</td>
<td>{{item.source}}</td>
<td>{{item.destination}}</td>
<td>{{item.application_service}}</td>
<td>{{item.action}}</td>
<td>
<button class="btn-prime secondary" (click)="openFormModal()">Open</button><br>
</td>
<td>{{item.last_hit}}</td>
</tr>
</tbody>
</table>
</div>
</div>
parent.component.ts
import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
import { FormModalComponent } from '../form-modal/form-modal.component';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-nsx',
templateUrl: './nsx.component.html',
styleUrls: ['./nsx.component.scss']
})
export class NsxComponent implements OnInit {
data = [];
constructor(private modalService: NgbModal) { }
ngOnInit() {
this.data = this.getData();
}
getData() {
return [
{
"id": 1,
"rule_name": "Sonsing",
"rule_unique_ID": "536755292-7",
"source": "http://xing.com",
"destination": "Mozilla/6.0 (Windows NT 6.2; WOW64; rv:16.0.1) Gecko/20121011 Firefox/16.0.1",
"application_service": "Crown Victoria",
"action": true,
"last_hit": "12/24/2018",
"comment": ""
}, {
"id": 2,
"rule_name": "Wrapsafe",
"rule_unique_ID": "876757883-7",
"source": "http://hard.com",
"destination": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/ (KHTML, like Gecko) Chrome/12.0.7",
"application_service": "Durango",
"action": true,
"comment": "",
"last_hit": "12/24/2017"
}, {
"id": 3,
"rule_name": "Stringtough",
"rule_unique_ID": "192903899-2",
"source": "http://cut.com",
"destination": "Chrome/15.0.8 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/ (KHTML, like Gecko)",
"application_service": "Tracker",
"action": false,
"comment": "",
"last_hit": "07/31/2018"
}, {
"id": 4,
"rule_name": "Matsoft",
"rule_unique_ID": "848151693-7",
"source": "http://bing.com",
"destination": "Mozilla/5.0 (Windows NT 6.2; Win64; x64;) Gecko/20100101 Firefox/20.0",
"application_service": "Thunderbird",
"action": false,
"comment": "",
"last_hit": "07/08/2018"
}, {
"id": 5,
"rule_name": "Zathin",
"rule_unique_ID": "153395073-3",
"source": "http://woo.com",
"destination": "Mozilla/5.0 (Windows; U; Windows NT 6.1; ja-JP) AppleWebKit/ (KHTML, like Gecko)",
"application_service": "Thunderbird",
"action": false,
"comment": "",
"last_hit": "08/12/2018"
}, {
"id": 6,
"rule_name": "Zathin",
"rule_unique_ID": "954376364-X",
"source": "http://love.com",
"destination": "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_4; en-gb) AppleWebKit/ (KHTML, like Gecko)",
"application_service": "Sephia",
"action": false,
"comment": "",
"last_hit": "01/10/2018"
}
];
}
openFormModal() {
const modalRef = this.modalService.open(FormModalComponent);
modalRef.componentInstance.id = this.getData["id"];
modalRef.result.then((result) => {
console.log(result);
}).catch((error) => {
console.log(error);
});
}
}
child.component.html
<div class="modal-header">
<h4 class="modal-title">Comment Form</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"><i class="fa fa-times"></i></button>
</div>
<ngb-tabset>
<ngb-tab title="Simple">
<ng-template ngbTabContent>
<form [formGroup]="myForm" (ngSubmit)="submitForm()">
<div class="modal-body">
<div class="container">
<div class="form-group">
<div class="two-col">
<div class="col1">
<label for="owner">Application Owner</label>
<input type="text" class="form-control" formControlName="owner" name="owner"/>
</div>
<div class="col2">
<label for="reviewer">Reviewer</label>
<input type="text" class="form-control" formControlName="reviewer" name="reviewer">
</div>
</div>
</div>
<div class="form-group">
<div class="two-col">
<div class="col1">
<label for="comments">Reviewer Comments</label>
<textarea class="form-control" id="comments" placeholder="Enter comment" name="comment" formControlName="comment"></textarea>
</div>
<div class="col2">
<label for="date">Reviewer Date</label>
<input class="form-control" type="date" min="2018-01-01" max="2018-12-31" name="date" formControlName="date">
</div>
</div>
</div>
<div class="form-group">
<div class="two-col">
<div class="col1">
<label for="status">Status</label>
<input class="form-control" type="text" formControlName="status" name="status" [(ngModel)]="status">
</div>
<div class="col2">
<label for="exp_date">Expiration Date</label>
<input class="form-control" type="date" min="2018-10-01" max="2019-12-31" formControlName="exp_date" name="exp_date">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" [disabled]="!myForm.valid">Submit Form</button>
<button class="btn btn-light">Cancel</button>
</div>
</form>
</ng-template>
</ngb-tab>
<ngb-tab title="View Comments">
<ng-template ngbTabContent>
<div class="container">
<div class="modal-body">
Where the comments data will appear
<ul>
<li *ngFor="let item of data">{{item.reviewer}}</li>
</ul>
</div>
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
child.component.ts
import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import {NgbTabsetConfig} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-form-modal',
templateUrl: './form-modal.component.html',
styleUrls: ['./form-modal.component.scss']
})
export class FormModalComponent implements OnInit {
myForm: FormGroup;
owner:string;
reviewer:string;
comment:string;
date:number;
status: string;
exp_date: number;
constructor(public activeModal: NgbActiveModal, private formBuilder: FormBuilder) {
this.createForm();
}
ngOnInit() {
}
private createForm() {
this.myForm = this.formBuilder.group({
owner: [this.owner,[]],
reviewer: [this.reviewer,[]],
comment: [this.comment,[]],
date: [this.date,[]],
status: [this.status,[]],
exp_date: [this.exp_date,[]]
})
}
private submitForm() {
//grab the row individually based on id
// display the comment data to child component
// repeat
// console.log(this.myForm.value);
this.activeModal.close(this.myForm.value);
}
}
这可能吗？
谢谢