在角 - 优文库

图片截断HTML元素你有没有和也许20 <button>元素一个div：在角

有时，这可以得到非常高的。我想知道什么是正确的方法与Angular“截断”到第一个“4”按钮和“更多/更少”<p>标签切换，这将显示或隐藏额外按钮的需求。我知道我需要做什么，我知道如何用jQuery或“原始HTML”来做到这一点，但必须有一种角度方式，我没有看到（我正在考虑集成一个管道，它可以截断基于布尔，但不是很确定）

目前代码：

<div fxLayout="column"> 
    <ng-container *ngFor="let color of car['style']?.colors"> 
    <div fxFlex="30" *ngIf="color.category ==='Exterior'"> 
     <md-card-subtitle> 
      {{ color.category }} Colors {{display.exterior}} 
      </md-card-subtitle> 
      <md-card-content> 
      <ng-container *ngFor="let option of color?.options"> 
       <button *ngIf="option.colorChips !== undefined" type="button" (mouseover)="display.exterior = option.name" (mouseleave)="display.exterior = colors.exterior.name" (click)="setSelectedColor(x)" [ngStyle]="{'background-color': '#' + option.colorChips.primary.hex}"> </button> 
       </ng-container> 
      </md-card-content> 
     </div> 
     </ng-container> 
    </div>

来源

2017-08-17 Moshe

为什么不是你的按钮绑定到数据在类（例如通过NgFor）并让添加/删除按钮修改数据？ – salmore

@salmore感谢您的建议。我添加了我的代码，以显示我确实使用ngFor来填充按钮，但是我需要一种方法来获取4个按钮，并且能够拉动剩下的部分..认为可以用管道完成，只需要更多方向 – Moshe

如果我正确理解你的问题，有几种方法可以做到这一点，1.最简单但不太可能的最好方法是将分页绑定到类'perPage = 5'的属性，然后将模板更改为类似于 '

' – salmore

有几种方法可以解决这个问题。我会在以下描述我最近使用的解决方案中的一个。请看这link杨树分类的部分。

您可以使用ngFor指令迭代集合，然后使用ngIf指令有条件地显示和隐藏所需的按钮部分。
在你的组件类声明布尔变量并将其连接到该按钮进行设置真假

请参见下面的代码

<ng-container *ngFor="let featuredCategory of featuredCategories; let i=index"> 
     <div class="col-sm-3 mb-5 mt-4 mr-auto ml-auto" *ngIf="i<=7"> 
      show this div if array index is less than 7th item   
     </div> 
     <div class="col-sm-3 mb-5 mt-4 mr-auto ml-auto" *ngIf="showAllCategories && i>=8"> 
      show this div if array index is more than 7th item   
     </div> 
     </div> 
     </ng-container> 
     <button class="btn btn-primary btn-lg" (click)="showAllCategories = !showAllCategories"> 
      <span *ngIf="showAllCategories"> View Less Categories 
      <i class="icon-arrow-right icons mt-5"></i> 
      </span> 
      <span *ngIf="!showAllCategories"> View All Categories 
      <i class="icon-arrow-right icons mt-5"></i> 
      </span> 
     </button>

来源

2017-08-17 06:43:07 Kamal

您可以使用分页来解决他。您可以使用分页限制在每个页面上显示的按钮数量。

可以使用NGX-分页此=>NGX_PAGINATION

1）安装NGX-分页NPM安装NGX-分页--save

2）添加到app.module.ts @ NgModule（{ 进口：[BrowserModule，NgxPaginationModule]

3）在你的HTML

 <ng-container *ngFor="let option of color?.options | paginate: { itemsPerPage: this.linesperpage, currentPage: p }"> 

    <label class="sr-only" for="inlineFormInput">Lines Per Page</label> 
    <select class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" [(ngModel)]="linesperpage"> 
     <option>4</option> 
     <option>10</option> 
     <option>20</option> 
    </select> 
<pagination-controls (pageChange)="p = $event" class="my-pagination" ></pagination-controls>

4）在你的组件： -

export class RideSuccessComponent { 

    p = 1; 
    linesperpage = 4; 
}

通过刚刚在选择类，你可以很容易地修改每个页面上显示的按钮的数量增加。希望这可以帮助。

来源

2017-08-17 05:53:44 Himanshu

在角

回答

相关问题