角度：コントローラからのコンポーネントを非表示

Question

だから私は k新規の角度 JS（1.6.4）です。私はコントローラを使用してプログラムで表示/非表示にしたいコンポーネントがあります。残念ながら、私は自分のコンポーネントをつかんで、ng-hideをfalseに設定する方法を理解していません。

現在、私のコントローラは、サービスコールのように見えます。データが返ってくると、hide/showロジックを実行したいと思います：

<div id="container" class="flex-container"><!-- flex container --> 
    <div class="box" id="redbox" class="flex-item"><!-- flex item --> 
    <input id="searchTermInput" class="search-input"> 
    </div> 

    <div class="box" id="greenbox" class="flex-item"><!-- flex item --> 
    <button id="searchButton" class="search-button" (click)="runSearch($event)"> 
    Search 
    </button> 
    </div> 
    <hr width="100%" class="divider-line" ng-hide="dividerHider"> 
    <div class="flex-item search-results"> 
    <ul class="heroes"> 
     <li *ngFor="let result of searchResults"> 
     <span class="badge">{{result.id}}</span> {{result.title}} 
     </li> 
    </ul> 
    </div> 
</div> 

import { Component } from '@angular/core'; 
import {SearchService} from "./search.service"; 
import {SearchResult} from "./search-result"; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [SearchService] 
}) 
export class AppComponent { 
title = 'app'; 
searchResults: SearchResult[]; 
constructor(private searchResultService: SearchService) { } 
runSearch(ev): void { 
var q = 100; 

this.searchResultService.getHeroesSlowly().then(searchResults => { 
    this.searchResults = searchResults; 
    alert("Hello! I am an alert box!!" + this.searchResults.length); 

    //Call hide component here 
    } 
) 
} 

}

私はプログラム的に物事を隠すことに私の研究を行ってきたが、そのコードは非常にすべてのコントローラを使用していないようです。例えば、ここに

AngularJS: ng-show/ng-hide

、ここ

AngularJS - ng-hide with different ng-controller

この応答では、私は「$スコープ」に関するそのコードが行くことになっている場所へと損失で完全です。

ご協力いただきまして誠にありがとうございます。

EDIT：ソリューション

私はこの構築体を使い終わった。

... 
<hr width="100%" id="divider" class="divider-line" *ngIf="showDivider"> 
... 

export class AppComponent { 
    showDivider = false; 

    runSearch(ev): void { 

    this.searchResultService.getHeroesSlowly().then(searchResults => { 
     this.showDivider = true; 
     } 
    ) 
    } 
} 

Answer 1

あなたは、角度コード初めてのHTMLコンテンツのロードの例this.show_search = true;ために、変数のステートメントを追加することができます。次に、searchResultsに、この変数を変更することができます（同じjsの角度コードから読み込み可能な場合）。私は以下のようなもの（あなたが検索のdivを非表示にするとしましょう）について話しています：

<div class="box" id="redbox" class="flex-item" ng-show="show_search"> 
    <input id="searchTermInput" class="search-input"> 
</div> 

そしてrunSearch（）関数内でthis.show_search = false;にこのVARを変更します。次に、非表示にするHTMLコンテンツは表示されません。

別sulutionは、あなたのコンテンツかどうかを示し、オブジェクトにsearchResultsが存在するかどうかだけをチェックすることであり、それに応じて：

<div class="box" id="redbox" class="flex-item" ng-hide="searchResults"> 
    <input id="searchTermInput" class="search-input"> 
</div> 

最終ソリューション：ます。また、HTMLコンテンツにあなたの変数を初期化することができ（コンテンツを初めて読み込んだときに、検索後に同じ角度コードで通信しない場合）、最初の解決方法と同じ方法で使用します。以下のように：

私の方法とコードが異なる場合がありますが、それが主な考えです。だからあなたの構造に合わせる方法を調べることができます。あなたのHTMLコンテンツが、サービスを除く適切なjsの角度コントローラーと通信するかどうかをチェックしてください。これにより、新しい関数や変数の設定も簡単になります。もちろん

、あなたはjqueryの使用、およびHTMLコンテンツからあなたのidを読んで、それを隠すことができます：$("#searchTermInput").hide();

Answer 2

あなたの問題はES6で角度1.6を使用する方法であるようです。おそらく、このブログはes6でコンポーネントのスコープを構築する方法をよりよく理解するのに役立ちます。当面の作業のために

https://nazargargol.com/scope-watch-with-angular-es6-class/

、私はにあなたのコードを変更すること、（私はES6構文を使用していませんでした、とあなたが一緒にプレイするためのサンプルをcodepenていません）推測することができます。

this.searchResultService.getHeroesSlowly().then(searchResults => { 
    this.searchResults = searchResults; 
    alert("Hello! I am an alert box!!" + this.searchResults.length); 

    //Call hide component here 
    this.scope.show_results = true; 
    } 
) 

そしてへのあなたのhtml：

<div class="flex-item search-results" ng-show="show_results"> 
    <ul class="heroes"> 
     <li *ngFor="let result of searchResults"> 
     <span class="badge">{{result.id}}</span> {{result.title}} 
     </li> 
    </ul> 
    </div> 

トリック（空の範囲は、コンポーネントが構築されたときにデフォルトで作成され、あなたが追加することができ、OFC、提供を行う必要があります「search_resuそれにlts '）。

一般に、ng-hide、ng-show、ng-ifは$ scopeで定義されている変数/メソッドを使用しているため、正しいスコープを構築する必要があります。