我需要您的宝贵帮助。我有一个组件,需要在单击按钮时添加另一个组件。在我的“ viewunitcomponent”中,每个记录都有一个按钮以查看该记录的详细信息。我称它为组件,它在我的“ editcomponent”中。当我单击表中的按钮时,可以很好地使用该组件,但是当我单击另一个记录时,“ editcomponent”不再更改。我使用指令和ng-template。请在下面查看我的代码。
viewunit.html
<div class="col-md-9">
<div *ngIf="showEdit">
<ng-template myNgIf [value]="showEdit" >
<app-editunit></app-editunit>
</ng-template>
</div>
</div>
<app-editunit>
是另一个组件,显示了我可以实际在何处编辑所选记录的详细信息。
viewunit.ts
onViewDetail(element) {
this.showEdit = false;
this.genParams.unitToEdit = null;
this.genParams.unitToEdit = element;
if (this.genParams.unitToEdit !== null || this.genParams.unitToEdit !== undefined) {
this.showEdit = true;
}
console.log(element);
}
myNgIf.directive
@Directive({
// tslint:disable-next-line:directive-selector
selector: '[myNgIf]'
})
export class MyNgIfDirective implements OnInit {
val: boolean;
@Input() set value(val: boolean) {
debugger;
this.val = val;
this.createOrNot(val);
}
constructor(
private viewContainer: ViewContainerRef,
private template: TemplateRef<object>
) { }
ngOnInit() { }
public createOrNot(value) {
debugger;
const condition = value;
if (condition) {
this.viewContainer.createEmbeddedView(this.template);
} else {
this.viewContainer.clear();
}
}
}
edit.ts
ngOnInit() {
this.unitToEdit = this.genParams.unitToEdit;
this.createForm();
}
createForm() {
this.form = this.fb.group({
UnitName: [this.unitToEdit.UnitName],
InAssmt: [this.unitToEdit.InAssmt],
InFreqAssmt: [this.unitToEdit.InFreqAssmt],
InTypeOfAssmt: [this.unitToEdit.InTypeOfAssmt],
RlPropAssmt: [this.unitToEdit.RlPropAssmt],
RlFreqAssmt: [this.unitToEdit.RlFreqAssmt],
RlTypeOfAssmt: [this.unitToEdit.RlTypeOfAssmt],
AdvAnlPymtScm: [this.unitToEdit.AdvAnlPymtScm],
DiscRt: [this.unitToEdit.DiscRt],
DdlnOfAvlmnt: [this.unitToEdit.DdlnOfAvlmnt],
PenHoldy: [this.unitToEdit.PenHoldy],
ElecChrg: [this.unitToEdit.ElecChrg],
ElecTypeOfAssmt: [this.unitToEdit.ElecTypeOfAssmt],
WtrChrg: [this.unitToEdit.WtrChrg],
WtrTypeOfAssmt: [this.unitToEdit.WtrTypeOfAssmt],
});
}
我真的需要你的帮助。谢谢。