Question

如果mode为edit，我希望启用按钮，如果mode为view我应禁用它。

我从服务中获取模式值。

问题是如果模式更改为编辑，则按钮未启用。只有在刷新页面后才会启用它。请帮忙

// service.ts
getMode() {
  if (this.endSessionBtnActive)
    this.mode = 'edit';
  else
    this.mode = 'view';

  return this.mode;
}

//comporent.ts
ngOnInit() {
  this.mode = this.sessionWatch.getMode().valueOf();
  alert(this.mode);
  if (this.mode == 'edit') {
    this.showCreateProposalsBtn = true;
  } else {
    this.showCreateProposalsBtn = false
    alert('hidden');
  }
}

<a class="icon-links" *ngIf="showCreateProposalsBtn === true">
  <i *ngIf="showMyProposals&&selectedStatus[0]==='01'&&isAlertModal===false" class="npt-icon-add icon-states" aria-hidden="true" data-toggle="modal" data-target="#myModal" (click)="checkUnassigned()"></i>

</a>
<a class="icon-links" *ngIf="showCreateProposalsBtn === false">
  <i class="npt-icon-add icon-states-disabled" aria-hidden="true"></i>
</a>

Answer 1

//comporent.ts
ngOnInit() {
  this.mode = this.sessionWatch.getMode().valueOf();
  alert(this.mode);
}

<a class="icon-links" *ngIf="mode == 'edit'">
  <i *ngIf="showMyProposals&&selectedStatus[0]==='01'&&isAlertModal===false" class="npt-icon-add icon-states" aria-hidden="true" data-toggle="modal" data-target="#myModal" (click)="checkUnassigned()"></i>

</a>
<a class="icon-links" *ngIf="mode == 'view'">
  <i class="npt-icon-add icon-states-disabled" aria-hidden="true"></i>
</a>

可能会对你有帮助。

Answer 2

那是因为你的价值只在Init。

上更新一次

//template
<a class="icon-links" *ngIf="shouldShowCreateProposalsBtn()">


//component.ts
shouldShowCreateProposalsBtn()
{
  this.mode = this.sessionWatch.getMode().valueOf();
  return this.mode == 'edit';
}

Answer 3

如果您想更改模式，则需要订阅更改。

将以下代码添加到您的服务

 currentMode$ = this.currentActiveMode.asObservable();  

  changeCurrentMode (currentStep: string) {
    this.currentActiveMode.next(currentStep);
  }

修改你的获取模式功能以添加以下

getMode() {
  if (this.endSessionBtnActive)
    this.changeCurrentMode('edit');
  else
    this.changeCurrentMode('view');
}

现在，您可以在项目中的任何位置订阅模式表单。

在组件构造函数

中添加以下代码

sessionWatch.currentMode$.subscribe(
  mode => {
    this.mode = mode;
  }
);

启用/禁用按钮仅在页面刷新后工作

3 个答案: