时间戳

首页 > 解决方案 > 如何在不进入无限循环（Angular）的情况下调用一次按钮？

html - 如何在不进入无限循环（Angular）的情况下调用一次按钮？

问题描述

也许标题不是很清楚，但这是我所拥有的。

我有一个场景，我在 HTML 中有一个按钮，我在单击按钮时调用服务，并且我希望 HTML B 知道何时单击 HTML A 中的按钮。

一个.html

<button (click)="passData(a,b,c)">

B.html

<div *ngIf="fromA()" > 
 {{ showResult() }}
</div>

组件.ts

passData(a: string, b:string, c:string) {
  this.Xservice.getData.subscribe(data => res = data);
}

B.compoent.ts

fromA() {
  this.xService.subscribe( data => res = data ); // This is observable
  if (res !== undefined ) {
    console.log("true returned");
    return true;
  }
}

因此，从上面我检查了控制台，它充斥着“真实返回”的日志，我想知道当按下 A.html 的按钮时如何调用它一次？

标签： htmlangular

解决方案

你不需要使用*ngIf. 你可以有

fromA():string {
  if // Whatever logic you do
  return "block";
  else return "none";
}

现在我假设您的意思是您希望 HTML B 仅在单击 fromA() 时显示。所以你可以这样做：

<div [display] = "fromA()">
 {{ showResults()  }}
</div>

基本上，您只需将属性设置display为任何结果fromA()。如果未单击按钮（返回none），则不显示 HTML（display=none）。如果单击（返回inline），则显示 HTML（display=inline）。

当然，您可以使用除内联之外的任何其他显示属性来显示 HTML。

推荐阅读