在Angular2中点击隐藏Div

时间：2018-03-23 18:25:19

标签： javascript angular

我是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。是 它因为它的状态仍然“隐藏”了吗？

<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。正如您所看到的那样，它会在clickdetails.html中显示div中的绘画，其中包含类列表'painting'。每次第一次搜索后，这个div 单击'paintingslist'，带有类'list'的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."
  }
]

2 个答案:

答案 0 :(得分：1)

图片未再次显示，因为public static void main(String[] args) { Scanner keyboard = new Scanner (System.in); System.out.println("Enter up to 10 full names with up to 120 characters and at least two names with at least 4 characters: "); String[] fullName= new String[10]; String[] separatedName; String name; int i = 0; do { name = keyboard.nextLine(); fullName[i]=name; i++; separatedName = name.split(" "); //System.out.println(Arrays.toString(separatedName)); int l = 0; for(int n = 0; n < separatedName .length; n++){ if(separatedName [n].length() >= 4 ) { l++; } } if(l >= 2 && name.length() <= 120 || name.equalsIgnoreCase("fim") ) { //System.out.println("Valid name."); } else {System.out.println("'" +name+ "'" + " is an invalid name"); } } while(i<10); keyboard.close(); } 未设置为空且currentPainting没有重新渲染（未重新启动构造函数以重置PaintingDetailsComponent以便＆＃39;仍然是假的）。在你的painting-details.component.ts中发出一个事件来通知父母隐藏：

isHidden

在您的search.component中订阅该事件并将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(); } } 设置为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." } ] 删除isHidden。

答案 1 :(得分：0)

您在PaintingDetailsComponent中单击时将isHidden设置为false，并且从不重置它。我猜你也在设置currentPainting而不是清除它，这意味着你的PaintingDetailsComponent永远不会被重新初始化。我会在您的onclick中使用EventEmitter触发一个事件，重置搜索组件中的currentPainting。

onReset() {
  this.currentPainting = null;
}

这应该立即解决您的问题。你甚至可以完全摆脱isHidden。

相关问题
最新问题