hide 相关问题

所以我想只单击名称，其余的详细信息将只显示在单个客户订单上，谢谢 [[]] 根据您的显示或隐藏详细信息在组件中定义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

dijit tabcontainer如何隐藏标签页？

我不知道如何在标签容器中隐藏标签。到目前为止，我尝试过的方法不起作用。以下代码的结果是，未显示选项卡中的内容，但选项卡本身一直存在。 ...

dojo hide dijit.form tabcontainer dijit.layout

回答 1 投票 1

Bootstrap 4响应实用程序可见/隐藏的xs sm lg不起作用

当迁移到Bootstrap 4时，新的响应实用程序隐藏/可见类出现问题。我知道.hidden-类已从v3中删除，并替换为.hidden-*-up ....

twitter-bootstrap twitter-bootstrap-3 hide hidden twitter-bootstrap-4

回答 4 投票 80

如何隐藏目录中的文件？

目录的屏幕快照在此图片中，我试图隐藏该图片中的文件，但是失败了。怎么做？以及如何打开隐藏文件？