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

Question

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

<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

像这样在您的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>

Answer 2

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

Answer 3

<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>

Answer 4

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 }} )
  }
}