Question

所以id只需单击名称，其余的详细信息将   放下那个单曲
       客户订单，谢谢

<ion-card *ngFor="let item of AllOrders; let i = index;">
<ion-card-header type="button">
  <ion-icon name="arrow-down"></ion-icon>
  {{item.customerName}}
</ion-card-header>

<ion-card-content>
  <ion-list>
    <ion-label>Customer Details</ion-label>
    <p>{{item.customerNumber}}</p>
    <p>{{item.customerEmail}}</p>
    <p>{{item.customerAddress}}</p>
    <ion-label>Product Details</ion-label>
    <p>{{item.productBrand}}</p>
    <p>{{item.productType}}</p>
    <p>{{item.productCode}}</p>
    <p>{{item.productColor}}</p>
    <p>{{item.productSize}}</p>
    <p>{{item.dateOfOrder}}</p>
    <p>Ordered By {{item.salesPerson}}</p>
    <p>Status: {{item.status}}</p>

  </ion-list>
  <ion-button (click)="DeleteOrder()">Delete</ion-button>

</ion-card-content>

Answer 1

根据显示或隐藏详细信息在组件中定义bool属性。

public showDetails: bool = false;

像这样在您的html中使用*ngIf="showDetails"。

<ion-card-content>
  <ion-list *ngIf="showDetails">
    <ion-label>Customer Details</ion-label>
    <p>{{item.customerNumber}}</p>
    <p>{{item.customerEmail}}</p>
    <p>{{item.customerAddress}}</p>
    <ion-label>Product Details</ion-label>
    <p>{{item.productBrand}}</p>
    <p>{{item.productType}}</p>
    <p>{{item.productCode}}</p>
    <p>{{item.productColor}}</p>
    <p>{{item.productSize}}</p>
    <p>{{item.dateOfOrder}}</p>
    <p>Ordered By {{item.salesPerson}}</p>
    <p>Status: {{item.status}}</p>

  </ion-list>
  <ion-button (click)="DeleteOrder()">Delete</ion-button>

</ion-card-content>

最后将click添加到名称icon-icon，如下所示：

<ion-card-header type="button" (click)="toggleDetails()">
  <ion-icon name="arrow-down"></ion-icon>
  {{item.customerName}}
</ion-card-header>

在您的Component中像这样简单地对其进行切换：

toggleDetails() {
   this.showDetails = !this.showDetails;
}

要添加一些动画，您可以根据需要使用css过渡，也可以使用第三方库（例如animate.css或Angular动画功能）。

Answer 2

在您的打字稿中 showDetails: boolean= false;

在您的html

<ion-card-header type="button" (click)="showDetails = !showDetails;">
  <ion-icon name="arrow-down"></ion-icon>
  {{item.customerName}}
</ion-card-header>

Answer 3

您可以创建一个虚拟属性。这将帮助您切换视图

html

<ion-card *ngFor="let item of AllOrders; let i = index;">
<ion-card-header type="button" ***(click)="toggleView(item)"***>
  <ion-icon name="arrow-down"></ion-icon>
  {{item.customerName}}
</ion-card-header>
<ion-card-content ****ngIf="item.showMore"***>
  <ion-list>
    <ion-label>Customer Details</ion-label>
    <p>{{item.customerNumber}}</p>
    <p>{{item.customerEmail}}</p>
    <p>{{item.customerAddress}}</p>
    <ion-label>Product Details</ion-label>
    <p>{{item.productBrand}}</p>
    <p>{{item.productType}}</p>
    <p>{{item.productCode}}</p>
    <p>{{item.productColor}}</p>
    <p>{{item.productSize}}</p>
    <p>{{item.dateOfOrder}}</p>
    <p>Ordered By {{item.salesPerson}}</p>
    <p>Status: {{item.status}}</p>
  </ion-list>
  <ion-button (click)="DeleteOrder()">Delete</ion-button>
</ion-card-content>

在您的.ts文件中

 public toggleView(item){
       item.showMore = !item.showMore
 }

如果您有任何疑问，请告诉我

Answer 4

这是根据您的注释针对每个组件的不同显示/隐藏的另一种解决方案。这是一个简单的示例给您：

https://stackblitz.com/edit/angular-4ewxtd

app.component.ts：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    data = [
    {
      name: "Name 1", 
      is_shown: true
    },
    {
      name: "Name 2", 
      is_shown: true
    },
    {
      name: "Name 3", 
      is_shown: true
    },
    {
      name: "Name 4", 
      is_shown: true
    },
    {
      name: "Name 5", 
      is_shown: true
    }
  ];

  toggleShowName( is_shown, i ) {
    this.data.map(( _ , index ) => { if (index == i ) { _.is_shown = !_.is_shown }} )
  }
}

app.component.html：

<h1>Simple Accordian Test</h1>

<div class="c-card" *ngFor="let d of data; let i = index;">
  <div class="name-container">
    <div class="cursure" (click)="toggleShowName(d.is_shown, i)" *ngIf="d.is_shown">+</div>
    <div class="cursure" (click)="toggleShowName(d.is_shown, i)" *ngIf="!d.is_shown">-</div>
    <div class="name" *ngIf="d.is_shown">
          {{d.name}}
    </div>
  </div>
</div>

app.component.css：

.c-card {
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 10px;
  text-align: center;
}

.cursure {
  cursor: pointer;
  padding: 10px;
  background-color: white;
  width: 10px;
  margin: 5px;
  color: blue;
  font-weight: bold;
}

我如何在单击时显示和隐藏单个项目的详细信息

4 个答案:

html

在您的.ts文件中