Question

我是Angular 4的新手。我制作了一个显示动态列表的组件：

带有崩溃答案的更新代码：

我的list.component.html

<ion-list class="list">
  <ion-item class="list-item" *ngFor="let decompte of decomptes">
    <div class="list-item-date">
        <p class="month" text-wrap>{{decompte.date | limitTo : 6}}</p>
    </div>
    <div class="list-item-type">
        <span class="info">{{decompte.name}}</span>
        <span class="legend">{{decompte.actes}}</span>
    </div>
    <div class="list-item-price">
        <span class="info">{{decompte.price}} €</span>
        <span class="legend">{{decompte.tiers}}</span>
    </div>
    <div class="list-item-btn">
        <ion-icon class="icon ion-ios-arrow_right"></ion-icon>
    </div>
  </ion-item>
</ion-list>

我在第一个模板中调用它，我也需要在另一个模板中使用它，但我必须限制最后3个项目，并且不要显示所有这些项目。

我的模板： dashboard.html

<div class="dashboard-decomptes">
  <list-component limit="3"></list-component>
  <button ion-button clear (click)="goToStatements()">Consulter tous mes décomptes</button>
</div>

组件ts文件：

list.component.ts

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


@Component({

selector: 'list-component',
templateUrl: './list.component.html'
})

export class listComponent {

//Temp fake news
public decomptes = [{
    date: '12 Janvier',
    name: 'toto',
    price: '122,25',
    tiers: 'tutu',
    actes : "+ 2 actes"
}, ....]

@Input() limit: number;

}

我不知道如何在特定模板中添加限制。如果有人有想法.. 谢谢提前！

Answer 1

在list-component传递限制作为输入

<list-component limit="3"></list-component>

然后在ListComponent里面用

检索它

@Input() limit: number;

还记得导入输入装饰器

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

然后，为了限制所显示元素的数量，您可以执行类似

的操作

<ion-item class="list-item" *ngFor="let decompte of decomptes.reverse().slice(0, limit+1)">

Answer 2

如果有人想知道最终解决方案：

list.component.ts

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


@Component({

selector: 'list-component',
templateUrl: './list.component.html'
})

export class listComponent {

//Temp fake news
public decomptes = [{
    date: '12 Janvier',
    name: 'Pharmacie',
    price: '122,25',
    tiers: 'tiers-payant',
    actes : "+ 2 actes"
},...]

@Input() limit: number;

}

list.component.html

<ion-list class="list">
<ion-item class="list-item" *ngFor="let decompte of decomptes.slice(0, limit)">
    <div class="list-item-date">
        <p class="month" text-wrap>{{decompte.date | limitTo : 6}}</p>
    </div>
    <div class="list-item-type">
        <span class="info">{{decompte.name}}</span>
        <span class="legend">{{decompte.actes}}</span>
    </div>
    <div class="list-item-price">
        <span class="info">{{decompte.price}} €</span>
        <span class="legend">{{decompte.tiers}}</span>
    </div>
    <div class="list-item-btn">
        <ion-icon class="icon ion-ios-arrow_right"></ion-icon>
    </div>
</ion-item>
</ion-list>

我只需要最后三项的模板：

<list-component limit="3"></list-component>

非常感谢Crash给了我整个解决方案。

使用具有不同模板的ngFor组件

2 个答案: