单击多个对象时显示说明

Question

我正在使用Angular版本7。我有 6 个按钮 I 2 列。我想显示同一div 中其中一个按钮的描述。 我已经实现了在任何按钮中单击时显示所有文本。我该如何改变它？

这是代码：

status: boolean = true;
  showDescription() {
    this.status = !this.status;
  }
}

.shown {
    opacity: 1 !important;
    transition: .5s ease;
}
.item__description {
                opacity: 0;
                transition: .5s ease;
                h4 {
                    font-size: 30px;
                    margin: 0 20px;
                }
                p {
                    color: #ffffff;
                    margin: 0 20px;
                }
            }

<div class="content__left">
            <div class="content__item">
                <button (click)="showDescription()"><i class="fas fa-money-check-alt"></i></button>
                <div class="item__description" [ngClass]="status ? '' : 'shown'">
                    <h4>NAJLEPSZE CENY W REGIONIE</h4>
                    <p>Najwyższe ceny skupu złomu stalowego na Podlasiu</p>
                </div>
            </div>
            <div class=" content__item ">
                <button (click)="showDescription()"><i class="fas fa-dolly "></i></button>
                <div class="item__description" [ngClass]="status ? '' : 'shown'">
                    <h4>TRANSPORT</h4>
                    <p>Posiadamy własną flotę pojazdów</p>
                </div>
            </div>
            <div class="content__item ">
                <button (click)="showDescription()"><i class="fas fa-hand-holding "></i></button>
                <div class="item__description" [ngClass]="status ? '' : 'shown'">
                    <h4>KONTROLA ŁADUNKU</h4>
                    <p>Kontrolujemy cały proces załadunku i rozładunku</p>
                </div>
            </div>
        </div>

Answer 1

在您的评论之后，在我看来，您可能想要这个。

showMoneyCheckDescription = false;
showDollyDescription = false;
showHandHoldingDescription = false;

.shown {
    opacity: 1 !important;
    transition: .5s ease;
}
.item__description {
                opacity: 0;
                transition: .5s ease;
                h4 {
                    font-size: 30px;
                    margin: 0 20px;
                }
                p {
                    color: #ffffff;
                    margin: 0 20px;
                }
            }

<div class="content__left">
            <div class="content__item">
                <button (click)="showMoneyCheckDescription = !showMoneyCheckDescription "><i class="fas fa-money-check-alt"></i></button>
                <div class="item__description" [ngClass]="showMoneyCheckDescription ? '' : 'shown'">
                    <h4>NAJLEPSZE CENY W REGIONIE</h4>
                    <p>Najwyższe ceny skupu złomu stalowego na Podlasiu</p>
                </div>
            </div>
            <div class=" content__item ">
                <button (click)="showDollyDescription = !showDollyDescription"><i class="fas fa-dolly "></i></button>
                <div class="item__description" [ngClass]="showDollyDescription ? '' : 'shown'">
                    <h4>TRANSPORT</h4>
                    <p>Posiadamy własną flotę pojazdów</p>
                </div>
            </div>
            <div class="content__item ">
                <button (click)="showHandHoldingDescription = !showHandHoldingDescription "><i class="fas fa-hand-holding "></i></button>
                <div class="item__description" [ngClass]="showHandHoldingDescription ? '' : 'shown'">
                    <h4>KONTROLA ŁADUNKU</h4>
                    <p>Kontrolujemy cały proces załadunku i rozładunku</p>
                </div>
            </div>
        </div>

原始答案

尝试这样的事情，您不会使用布尔翻转变量，而是使用指示要显示哪个部分的描述的命名项。

itemToShow: string;
  showDescription(itemName: string) {
    if (this.itemToShow === itemName) {
        // if item that is showing was clicked again, then deselect
        this.itemToShow = null; // deselect
    } else {
        this.itemToShow = itemName; // select
    }
}

.shown {
    opacity: 1 !important;
    transition: .5s ease;
}
.item__description {
                opacity: 0;
                transition: .5s ease;
                h4 {
                    font-size: 30px;
                    margin: 0 20px;
                }
                p {
                    color: #ffffff;
                    margin: 0 20px;
                }
            }

<div class="content__left">
            <div class="content__item">
                <button (click)="showDescription('money-check')"><i class="fas fa-money-check-alt"></i></button>
                <div class="item__description" [ngClass]="itemToShow === 'money-check' ? '' : 'shown'">
                    <h4>NAJLEPSZE CENY W REGIONIE</h4>
                    <p>Najwyższe ceny skupu złomu stalowego na Podlasiu</p>
                </div>
            </div>
            <div class=" content__item ">
                <button (click)="showDescription('dolly')"><i class="fas fa-dolly "></i></button>
                <div class="item__description" [ngClass]="itemToShow === 'dolly' ? '' : 'shown'">
                    <h4>TRANSPORT</h4>
                    <p>Posiadamy własną flotę pojazdów</p>
                </div>
            </div>
            <div class="content__item ">
                <button (click)="showDescription('hand-holding')"><i class="fas fa-hand-holding "></i></button>
                <div class="item__description" [ngClass]="itemToShow === 'hand-holding'? '' : 'shown'">
                    <h4>KONTROLA ŁADUNKU</h4>
                    <p>Kontrolujemy cały proces załadunku i rozładunku</p>
                </div>
            </div>
        </div>

Answer 2

我建议你创建一个"手风琴"组件，它将具有你需要的行为。

@Component({
  selector: 'ng-accordion',
  template: `
     <div class="content__item ">
        <button (click)="showDescription()">
                  <i class="fas fa-hand-holding "></i>
        </button>
        <div class="item__description" [ngClass]="status ? '' : 'shown'">
           <ng-content></ng-content>
        </div>
     </div>
  `
})
export class AccordionComponent {
  public status = false;
  showDescription() {
    this.status = !this.status;
  }
}

之后你可以这样使用：

<ng-accordion>
  <h4>KONTROLA ŁADUNKU</h4>
  <p>Kontrolujemy cały proces załadunku i rozładunku</p>
</ng-accordion>
<ng-accordion>
  <h4>TRANSPORT</h4>
  <p>Posiadamy własną flotę pojazdów</p>
</ng-accordion>