dropdown 相关问题

所以我想只单击名称，其余的详细信息将只显示在单个客户订单上，谢谢 [[]] 根据您的显示或隐藏详细信息在组件中定义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 transition或使用第三方库（如animate.css或Angular动画功能。在您的打字稿中showDetails: boolean= false; 使用您的html <ion-card-header type="button" (click)="showDetails = !showDetails;"> <ion-icon name="arrow-down"></ion-icon> {{item.customerName}} </ion-card-header> 您可以创建一个虚拟属性。这将帮助您切换视图 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 } 让我知道是否有任何问题这里是根据您的注释针对每个组件的不同显示/隐藏的另一种解决方案。这是一个简单的示例供您使用： 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; }

angular ionic-framework hide dropdown show

回答 4 投票 0

下拉导航栏并发症

我不知道哪里出了问题，但是我尝试执行的所有操作都无法使我的下拉菜单关闭并保持很大的障碍。任何人都可以告诉我我做错了什么，以便我可以提醒问题以及我在...

html css navbar dropdown

回答 1 投票 2

参数未使用ajax传递给控制器

我正在尝试以下代码，以从使用ajax选择的类别字段获取子类别。但是该值不会传递给控制器功能。我尝试了所有解决方案，但是...

ajax model controller dropdown

回答 1 投票 0

悬停时的全角Bootstrap下拉菜单消失

我有一个全角Bootstrap下拉菜单，该按钮不能正常工作，因为按钮和菜单之间有很多空间。到目前为止，我只为此使用CSS，没有javascript。这是代码：...