如何使用Angular 2中的指令删除组件

时间:2018-06-30 16:35:26

标签: angular

我需要您的宝贵帮助。我有一个组件,需要在单击按钮时添加另一个组件。在我的“ 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],
    });
  }

我真的需要你的帮助。谢谢。

0 个答案:

没有答案