написать кастомную трубу для ngFor - PullRequest
0 голосов
/ 24 сентября 2019

Я новичок в angualr 8 и не использовал пользовательских труб.Пожалуйста, помогите в этом.Как написать пользовательский канал для 'limitTo: article.articles.limit?артикул.articles.length: 10 '

<div *ngFor="let section_articles of articles.articles | limitTo : articles.articles.limit ? articles.articles.length : 10">

Ответы [ 2 ]

0 голосов
/ 25 сентября 2019

Решение отработано:

<div *ngFor="let section_articles of (articles.articles.limit ? (articles.articles | slice: 0 : articles.articles.length) : (articles.articles | slice: 0 : 10))">
0 голосов
/ 24 сентября 2019

Полагаю, вы хотите сделать итеративную таблицу, содержащую всего 10 элементов?Лучше сделайте .slice(0,10) в конце вашего метода.если нет, вы можете параметризовать канал или настроить его, следуя этому примеру:

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Raise the value exponentially
 * Takes an exponent argument that defaults to 1.
 * Usage:
 *   value | exponentialStrength:exponent
 * Example:
 *   {{ 2 | exponentialStrength:10 }}
 *   formats to: 1024
*/
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent?: number): number {
    return Math.pow(value, isNaN(exponent) ? 1 : exponent);
  }
}

Например: используя интерполяцию:

<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>

template: `
  <p>The hero's birthday is {{ birthday | date:format }}</p>
  <button (click)="toggleFormat()">Toggle Format</button>
`
export class HeroBirthday2Component {
  birthday = new Date(1988, 3, 15); // April 15, 1988
  toggle = true; // start with true == shortDate

  get format()   { return this.toggle ? 'shortDate' : 'fullDate'; }
  toggleFormat() { this.toggle = !this.toggle; }
}

я беру это из угловых документов: параметризациятруба

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...