为什么我要了解所有英雄的详细信息?

时间:2018-12-02 08:26:49

标签: html angular typescript

我希望在显示更多时单击特定英雄的详细信息。 现在,我将获得所有英雄详​​细信息,并显示更多点击次数

DECLARE @command varchar(1000) 
SELECT @command = 'USE ? if schema_id(N''Staging'') is not null select db_name() as DatabaseName' 
EXEC sp_MSforeachdb @command 

2 个答案:

答案 0 :(得分:0)

这是您可以做的:

脚本

  heroes: any[] = [{name: 'Hero1', power: 'bow'}, {name: 'Hero2', power: 'sword'}];
  expanded: {[i: number]: boolean} = {};

  getHeroDetails(i: number) {
    this.expanded[i] = true;
  }

查看

<ul *ngFor="let hero of heroes; let i = index">
  <li>
    {{hero.name}}
    <button (click)="getHeroDetails(i)">show More</button>
    <p *ngIf="expanded[i]">{{hero.power}}</p> 
  </li>
</ul>

here

基本上,expanded将英雄索引映射到一个布尔值,该布尔值指示相关英雄的详细信息是否扩展。 getHeroDetails只是将相应的标志设置为true。

答案 1 :(得分:0)

据我了解,您有一个英雄列表,并且您想在单击英雄旁边的按钮时切换其详细信息的可见性。

使用对象轻松跟踪要切换其详细信息的当前对象,即可轻松实现。

尝试一下:

void inorder_traversal(NODE node, unsigned long long *inorder){


if (node == NULL){
    return; 
}


inorder_traversal(node->left, inorder); 



inorder[index] = node->data;
index++;



inorder_traversal(node->right, inorder); 


}

在模板中:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  acts: any[];
  currentlyVisibleHeroData: any = {};

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('assets/heroes.json')
      .subscribe(acts => this.acts = acts);
  }

  toggleHeroVisibility(item) {
    if(this.currentlyVisibleHeroData.visible && this.currentlyVisibleHeroData.id === item.id) {
      this.currentlyVisibleHeroData.visible = !this.currentlyVisibleHeroData.visible;
      this.currentlyVisibleHeroData.id = item.id;
    } else {
      this.currentlyVisibleHeroData.visible = true;
      this.currentlyVisibleHeroData.id = item.id;
    }
  }

}

这是您推荐的Working Sample StackBlitz

注意::我刚刚将英雄列表添加到Favourites are as below <ul *ngFor="let item of acts;let i =index;"> <li>{{item.name}} `` <button (click)="toggleHeroVisibility(item)"> {{ currentlyVisibleHeroData.visible && currentlyVisibleHeroData.id === item.id ? 'Hide': 'Show More'}} </button> <p *ngIf="item.id == currentlyVisibleHeroData.id && currentlyVisibleHeroData.visible"> {{item.detail}} </p> </li> </ul> <button (click)="clearList()">Remove</button> 文件中,您可以在示例StackBlitz中看到它。在这种情况下,您可以使用自己的实现。只需确保拥有跟踪对象(在我的示例中为assets/heroes.json

我只是根据我们关注的项目是否具有与currentlyVisibleHeroData对象中的ID相同的ID来切换项目的可见性。逻辑很简单。