Question

我正在使用Angular 5，我想按另一个按钮来获取另一个按钮。

我不知道是否必须使用foo，但我不知道如何识别上一个按钮。

example.ts

ngIf

example.html的

import { Component, OnInit } from '@angular/core';

import { Hero } from '../hero';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroService.getHeroes()
    .subscribe(heroes => this.heroes = heroes);
  }

  add(name: string): void {
    name = name.trim();
    if (!name) { return; }
    this.heroService.addHero({ name } as Hero)
      .subscribe(hero => {
        this.heroes.push(hero);
      });
  }

  delete(hero: Hero): void {
    this.heroes = this.heroes.filter(h => h !== hero);
    this.heroService.deleteHero(hero).subscribe();
  }

}

Answer 1

在你的component.ts中：

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];
  showSecondButton: boolean = false;

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  delete(hero: Hero): void {
    this.heroes = this.heroes.filter(h => h !== hero);
    this.heroService.deleteHero(hero).subscribe();
    this.showSecondButton = true;
  }

}

在你的HTML中：

<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <a routerLink="/detail/{{hero.id}}">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </a>
    <button class="delete" title="delete hero" (click)="delete(hero)">x</button>
    <button *ngIf="showSecondButton"> Your second button</button>
  </li>
</ul>

Answer 2

因此，最好的办法是在div中创建两个按钮，然后使用切换按钮切换显示的按钮。

示例：

<div>
<button *ngIf=!displaysecondbutton (click)='showsecondbutton()'>First Button Yo</button>
<button *ngIf=displaysecondbutton>SecondButtonYo</button>

</div>

typescript file;

displaysecondbutton = false;
showsecondbutton(){
this.displaysecondbutton = true;
}

Answer 3

为了使代码简洁，我将在你的删除函数中实现一个if语句：

public deleteConfirmed = false;
public confirmDelete = false;
delete(hero: Hero): void {
  if (deleteConfirmed) {
    confirmDelete = deleteConfirmed = false;
    this.heroes = this.heroes.filter(h => h !== hero);
    this.heroService.deleteHero(hero).subscribe();
  }
  else{
    confirmDelete = true;
  }
}

然后在你的html：

<button class="delete" title="delete hero" (click)="delete(hero)">Delete</button>
<button *ngIf="confirmDelete" class="delete" title="delete hero" (click)="deleteConfirmed=true; delete(hero)">Confirm Deletion</button>

这样，你总是循环使用相同的功能，只是改变一些状态。

如何使按钮从另一个按钮中出来

3 个答案: