在Angular2中單擊隱藏Divs

Question

我對Angular2相當陌生，我有一個具有搜索字段的應用程序，允許用戶搜索我的繪畫。 當找到匹配項時，將顯示一個預覽div，然后單擊該div將顯示一個較大的div，其中包含有關繪畫的信息。當用戶完成查看並想要搜索另一個時，我希望他們能夠現在，我已經弄清楚了如何使div在用戶單擊時消失。 但是，如果用戶搜索新繪畫，則單擊預覽div時不會顯示較大的div，我認為這可能與當時應用程序的狀態有關，但我不是100百分百肯定，因為我是Angular2的新手，所以這就是為什么我向您尋求幫助。 您可以在此鏈接上測試我上面描述的行為： https : //mazzo-angular-app.herokuapp.com

謝謝您的幫助，CMazz

繪畫details.component.ts

import { Component } from '@angular/core';
import {Painting} from './painting';

@Component({
  selector: 'painting-details',
  templateUrl: 'partials/paintingdetails.html',
  inputs: ['painting'],
  styleUrls: ['css/search-details.css']
})

export class PaintingDetailsComponent{

isHidden: boolean;

constructor(){
    this.isHidden = true;
}

onClick(): void{
    console.log('button clicked yo');
    this.isHidden = !this.isHidden;
}

}

paintingdetails.html：這是較大的div，當單擊預覽div時將嵌入該div。 單擊時該div消失。 但是，如果執行新搜索並單擊預覽div，則不會顯示該div。 是否因為它的狀態仍處於“隱藏”狀態？

<section *ngIf="isHidden" (click)='onClick()' class="card paintinginfo 
clearfix">

  <div class="painting cf">
  <img src="../../../assets/images/{{painting.shortname}}.jpg" alt=" 
    {{painting.name}}">
   <h1>{{painting.name}}</h1>
   <div class="info">
   <h3>{{painting.reknown}}</h3>
   <div class="longbio">{{painting.bio}}</div>
   </div>
 </div>
</section>

search.component.html：類別為“ paintingslist”的下面的div是在找到匹配項時顯示的預覽div。 如您所見，單擊該按鈕后，它將在divs中顯示該繪畫，並且在paintingsdetails.html中帶有類列表“繪畫”。 第一次搜索后，每次單擊該div“ paintingslist”，帶有類列表“ painting”的div都不會再次顯示。

<div class="paintingsearch">
<div class="card search">
<h1 >Répertoire des Oeuvres</h1>
<input [(ngModel)]="query" placeholder='Type "Stegostarus" or "Color 
         Explosion"...'>
<label>search <span *ngIf="query"> for: {{query}}</span></label>
</div>
</div>
<ul *ngIf="query" class="paintingslist cf">
<li (click)="showPainting(item); query='';" 
      class="painting cf" *ngFor="let item of (paintings) | find:query">
        <painting-item class="content" [painting]=item></painting-item>
</li>
</ul>
<painting-details *ngIf="currentPainting" [painting]="currentPainting"> 
     </painting-details>

search.component.ts

import { Component, OnInit } from '@angular/core';
import { Painting } from './painting';
import { PaintingItemComponent } from './painting-item.component';
import { PaintingDetailsComponent } from './painting-details.component';
import { SearchPipe } from './search-pipe';

@Component({
  selector: 'app-search',
  templateUrl: './partials/search.component.html',
  styleUrls: ['./css/search.component.css']
})
export class SearchComponent{ 
    paintings = PAINTINGS;
    currentPainting: Painting;

    showPainting(item) {
      this.currentPainting = item;
    }

var PAINTINGS: Painting[] = [
  {
      "name": "Color Explosion",
      "shortname": "colorExplosion",
      "reknown": "Acrylic on Cardboard",
      "bio": "I couldn't get enough color."
  }, {
      "name": "Back Street Boys",
      "shortname": "backStreetBoys",
      "reknown": "Acrylic on Cardboard",
      "bio": "I wouldn't want to wander down some alley and find this crew..."
  }, {
      "name": "Arroz Con Pollo",
      "shortname": "arrozConPollo",
      "reknown": "Acrylic on Canvas",
      "bio": "This is Jean Michel Basquiat. I can only admire."
  }, {
      "name": "Stego Starus",
      "shortname": "stegoStarus",
      "reknown": "Acrylic on Cardboard",
      "bio": "This was one of my favorite dinos when I was a kid."
  }, {
      "name": "Two Nobodys",
      "shortname": "twoNobodys",
      "reknown": "Acrylic on Canvas",
      "bio": "These two the best of friends. "
  }, {
      "name": "Number One",
      "shortname": "numberOne",
      "reknown": "Acrylic on Cardboard",
      "bio": "I will always have a special place reserved for this one."
  },
  {
      "name": "Couch Fun",
      "shortname": "couchFun",
      "reknown": "Acrylic on Cardboard",
      "bio": "I consider this my best I guess."
  }
]

Answer 1

該圖像不再顯示，因為currentPainting未設置為null， PaintingDetailsComponent也未重新渲染（構造器不會再次觸發以重置isHidden所以仍然為假）。 在您的painting-details.component.ts中發出一個事件來通知父項隱藏：

import { Component, Output, EventEmitter } from '@angular/core';
import {Painting} from './painting';

@Component({
  selector: 'painting-details',
  templateUrl: 'partials/paintingdetails.html',
  inputs: ['painting'],
  styleUrls: ['css/search-details.css']
})

export class PaintingDetailsComponent{
  @Output() onHide = new EventEmitter();

  isHidden: boolean;

  constructor(){
    this.isHidden = true;
  }

  onClick(): void{
    this.isHidden = !this.isHidden;
    this.onHide.emit();
  }
}

然后在您的search.component中訂閱該事件，並將currentPainting設置為null 。

<div class="paintingsearch">
  <div class="card search">
    <h1 >Répertoire des Oeuvres</h1>
    <input [(ngModel)]="query" placeholder='Type "Stegostarus" or "Color 
         Explosion"...'>
    <label>search <span *ngIf="query"> for: {{query}}</span></label>
  </div>
</div>
<ul *ngIf="query" class="paintingslist cf">
  <li (click)="showPainting(item); query='';" 
      class="painting cf" *ngFor="let item of (paintings) | find:query">
    <painting-item class="content" [painting]=item></painting-item>
  </li>
</ul>
<painting-details 
    *ngIf="currentPainting" 
    [painting]="currentPainting" 
    (onHide)="resetCurrentPainting()"
></painting-details>

---

import { Component, OnInit } from '@angular/core';
import { Painting } from './painting';
import { PaintingItemComponent } from './painting-item.component';
import { PaintingDetailsComponent } from './painting-details.component';
import { SearchPipe } from './search-pipe';

@Component({
  selector: 'app-search',
  templateUrl: './partials/search.component.html',
  styleUrls: ['./css/search.component.css']
})
export class SearchComponent{ 
  paintings = PAINTINGS;
  currentPainting: Painting;

  showPainting(item) {
    this.currentPainting = item;
  }

  resetCurrentPainting() {
    this.currentPainting = null;
  }

  var PAINTINGS: Painting[] = [
  {
    "name": "Color Explosion",
    "shortname": "colorExplosion",
    "reknown": "Acrylic on Cardboard",
    "bio": "I couldn't get enough color."
  }, {
    "name": "Back Street Boys",
    "shortname": "backStreetBoys",
    "reknown": "Acrylic on Cardboard",
    "bio": "I wouldn't want to wander down some alley and find this crew..."
  }, {
    "name": "Arroz Con Pollo",
    "shortname": "arrozConPollo",
    "reknown": "Acrylic on Canvas",
    "bio": "This is Jean Michel Basquiat. I can only admire."
  }, {
    "name": "Stego Starus",
    "shortname": "stegoStarus",
    "reknown": "Acrylic on Cardboard",
    "bio": "This was one of my favorite dinos when I was a kid."
  }, {
    "name": "Two Nobodys",
    "shortname": "twoNobodys",
    "reknown": "Acrylic on Canvas",
    "bio": "These two the best of friends. "
  }, {
    "name": "Number One",
    "shortname": "numberOne",
    "reknown": "Acrylic on Cardboard",
    "bio": "I will always have a special place reserved for this one."
  },
  {
    "name": "Couch Fun",
    "shortname": "couchFun",
    "reknown": "Acrylic on Cardboard",
    "bio": "I consider this my best I guess."
  }
]

您甚至可以從PaintingDetailsComponent刪除isHidden 。

Answer 2

您在單擊PaintingDetailsComponent時將isHidden設置為false，並且永遠不要重置它。 我猜想您也在設置currentPainting而不是清除它，這意味着您的PaintingDetailsComponent永遠不會重新初始化。 我會在您的onclick中使用EventEmitter觸發一個事件，該事件會重置搜索組件中的currentPainting。

onReset() {
  this.currentPainting = null;
}

那應該立即解決您的問題。 您甚至可以完全擺脫isHidden。