web-dev-qa-db-ja.com

Angularボタンで非表示

angularを使用していて、クリックすると非表示になるボタンを作成しようとしています。[hidden]、（click）= "showHide =！showHide"、他の方法もたくさんあります今のところ何も機能していません.

私のhtml（現在）：

<div class="rows">
 <div class="a-bunch-of-styles-for-my-button">
  <a type="button" class="more-styles" (click)="inboundClick = !inboundClick" [routerLink]="['/inbound']" href="">
  </a>
 </div>
</div>

そして私のコンポーネント：

export class AppComponent {
inboundClick = false;
}

本質的に私はページに2つのボタンを持ち、1つのボタンをクリックすると両方のボタンを非表示にして新しいボタンのセットを表示したいと思います。

私はAngularに慣れていないので、なぜこれが機能しないのか非常に混乱しています。

htmlangulartypescriptshow-hide
7
RaptorJesus

あなたのHTML

<div class="yourCssClass" *ngIf="this.isButtonVisible" (click)="this.isButtonVisible = false">
...
</div>

あなたのTypeScript

export class AppComponent {
   private isButtonVisible = true;
}

これでうまくいくはずです。 *ngIfは、条件がfalseを評価する場合、要素を自動的に非表示にするため、変数をfalseに設定するだけで十分です。

ここで私が目にする問題は、どの時点でも可視性を制御しないことです。条件が満たされている場合、[ngClass]を使用して特定のクラスを追加するか、*ngIfは、ユーザー操作で要素を変更しようとする場合に役立ちます。

[ngClass]の詳細については、その使用方法についてこちらをご覧ください。 https://angular.io/api/common/NgClass

ここで*ngIfについて読むことができます： https://angular.io/api/common/NgIf

特に「一般的な使用」の部分はあなたにとって興味深いはずです。

編集：以下のコメントを読んで、[hidden]と(click)が実際に何をしているのか気付かなかったようです。 [hidden]は、通常、特定の条件に応じて、要素の表示を制御します。 (click)は、Click-Eventを要素にバインドする簡単な方法です。

これらのツールの両方を使用すると、ユーザーが要素をクリックした場合に変数を変更することにより、要素を非表示にできます（変数の新しい値は、(click)またはインラインで呼び出される関数によって割り当てられる場合があります。コード例）。

Edit2：ええ、あなたはAngular2/4を意味していました;）これでうまくいくはずです。

10
GxTruth

これを実現する方法は次のとおりです。

あなたのcomponent.htmlで：

<a type="button" class="more-styles" 
   [hidden]="!inboundClick" 
   (click)="inboundClick = !inboundClick" 
   [routerLink]="['/inbound']" href="">
</a>

<a type="button" class="more-styles" 
   [hidden]="!outboundClick " 
   (click)="outboundClick = !outboundClick " 
   [routerLink]="['/outbound']" href="">
</a>

...そしてあなたのAppComponentで：

export class AppComponent {
    inboundClick = true;
    outboundClick = true;
}

プランカーデモ

5
Faisal