Публикации по теме 'angular-pipe'
Угловые трубы 2: Понимание чистых и нечистых труб
Введение . В Angular каналы — это мощный инструмент, позволяющий преобразовывать данные перед их отображением в шаблонах. Каналы — это способ форматирования, фильтрации и манипулирования данными без изменения базового источника данных. Angular предоставляет две основные категории каналов: чистые каналы и нечистые каналы. В этом сообщении блога мы углубимся в различия между этими двумя типами каналов, предоставим примеры кода и продемонстрируем их результаты.
Чистые трубы :
Чистые..
Пользовательские трубы в Angular 2
В этой статье мы узнаем, как создавать собственные каналы . Как мы знаем, angular предоставляет 2 типа труб: Встроенные трубы и Пользовательские трубы .
Почему трубы?
Каналы позволяют нам форматировать значения в представлении шаблонов перед их отображением.
Определение труб
Оператор канала определяется символом канала (|), за которым следует имя канала:
Ниже приведен пример простого встроенного канала в верхнем регистре :
Приступим к созданию наших..
Функции внутри угловых шаблонов!
Многие из вас сказали бы, что имейте в своих шаблонах как можно больше минимальной логики. Да, это абсолютно верно, но иногда нам нужно использовать итерации, находящиеся в шаблоне, или для привязки некоторого свойства к элементу, или интерполировать строку на ходу, которая должна быть динамически вычислена и может иметь сложную логику.
Если вы когда-либо пробовали вызывать функции для привязки данных или интерполяции строк внутри вашего шаблона, вы могли бы заметить, что он..
Вопросы по теме 'angular-pipe'
Можно ли использовать в коде пайп?
Когда я использую свой собственный канал в шаблоне, это выглядит так:
{{user|userName}}
И это хорошо работает.
Можно ли использовать в коде пайп?
Я пытаюсь использовать это так:
let name = `${user|userName}`;
Но это показывает...
78470 просмотров
schedule
31.05.2022
Преобразование метки времени на дату с помощью угловых 2 каналов
Я пытаюсь преобразовать метку времени в формат даты с помощью каналов Angular. Я написал это в шаблоне HTML:
{{myTimestamp | date}}
Где myTimestamp имеет номер типа.
Я получаю неожиданные результаты, например отметка времени 1468251287...
58968 просмотров
schedule
11.03.2023
Выпуск Angular 2.0: каналы и директивы больше не являются свойствами @Component
Я только что обновил свое приложение, которое я построил на RC5, до финальной версии, и я не понимаю, как мне теперь объявлять директивы и конвейеры. Я получаю такую ошибку:
ОШИБКА в [по умолчанию] C: \ xampp \ htdocs \ meriem-car \ public \...
13108 просмотров
schedule
17.04.2022
Angular2 Использовать enum в трубе
У меня есть этот фильтр Труба:
import { Pipe, PipeTransform } from '@angular/core';
import { TaskStatus } from './task-status';
@Pipe({name: 'WithStatus'})
export class TaskStatusFilter implements PipeTransform{
transform(items: any[], args:...
12208 просмотров
schedule
28.11.2022
Angular2 + асинхронный канал: получение нескольких значений из одного Observale
У меня есть одна служба, которая возвращает один Observable. Теперь я ищу правильный/самый эффективный способ получить несколько результатов от этого Observable без написания слишком большого количества кода.
MyService возвращает...
1702 просмотров
schedule
01.07.2023
Встроенные трубы вызывают сбои при модульном тестировании компонента Angular 2
У меня есть образец компонента, который я хотел бы протестировать. Когда я использую пользовательский канал (например, мой пользовательский канал concat ), он работает нормально.
import { ConcatPipe } from 'path-to-concat-pipe';
@Component({...
2307 просмотров
schedule
18.05.2024
Угловое объявление пользовательской трубы
Я пытаюсь использовать пользовательский Pipe для фильтрации списка элементов.
// pipes/my-filter/my-filter.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'my-filter',
})
export class MyFilter implements PipeTransform...
1411 просмотров
schedule
24.01.2023
Пользовательская труба не работает
Я реализовал собственный канал, который получает массив объектов, а затем фильтрует этот массив в соответствии с пользовательским вводом. Но если я использую ссылку на элемент вместо [(ngModel)], это не работает. Вот входной элемент и канал:...
617 просмотров
schedule
01.10.2023
Программное использование AsyncPipe — Angular 2
Я использую компонент для рендеринга таблицы, такой как данные, я даю ему список столбцов, данные, как данные сопоставляются с каждым столбцом и, наконец, список каналов для применения к данным каждого столбца.
Пока все хорошо, единственная проблема...
1648 просмотров
schedule
18.07.2023
Почему труба не работает?
Я создал один канал для сортировки массива объектов на основе значения свойства объекта. Все объекты со свойствами show==0 и show==1 удаляются, ошибок нет и их можно увидеть в консоли.
pipe.ts
@Pipe({
name: 'menufilter'
})...
166 просмотров
schedule
17.05.2023
Как получить текущий день (обрезанный только до 3 символов) в angular2/4
Я использовал currentDate = new Date(); в моем typescript file и пытался выполнить рендеринг с использованием {{currentDate}} , но он показывает полный формат, например Sun Aug 06 2017 15:36:11 GMT+0530 (IST) .
Я взял ссылку из...
1211 просмотров
schedule
09.10.2022
Асинхронные вызовы в Angular 4 Pipes
У меня есть метод службы, который получает время с сервера, и я планирую использовать его в пользовательском канале. Цель конвейера — сравнить временную метку a с текущим временем и вернуть ее в удобочитаемом формате.
Сервис
export class...
1844 просмотров
schedule
17.07.2023
Наблюдаемая труба Angular CLI
Я пытаюсь создать канал, который принимает отметку даты и времени и возвращает, сколько времени прошло с того времени.
У меня есть следующий канал, который возвращает продолжительность один раз, но мне нужно, чтобы этот канал увеличивался каждую...
345 просмотров
schedule
04.09.2022
Браузер не анализирует теги HTML, возвращаемые угловым каналом
Я хочу передать значение каналу и позволить каналу превратить его в список. Возможно, это не лучший способ решить эту проблему, но это первое, что пришло в голову.
В основном у меня простая таблица. И у меня есть свой шаблон как таковой...
547 просмотров
schedule
16.05.2022
Ошибка при попытке SafePipe очистить встроенные видео Youtube
У меня возникла дилемма при попытке встроить видео с YouTube в мое приложение Angular.
Я попытался использовать метод Angular DomSanitizer «bypassSecurityTrustResourceUrl()», и он правильно отображал видео. Но DOM продолжал обновляться, вызывая...
597 просмотров
schedule
18.07.2022
Ngx-charts не может загружать гистограммы напрямую с помощью async pipe в angular
Моя проблема похожа на эту запись stackoverflow
Когда я использую асинхронный канал для просмотра данных из firebase и отображения их на диаграмме, я могу видеть диаграмму, но выводить на консоль нулевую ошибку. Без async pipe все ошибки...
2399 просмотров
schedule
04.07.2023
Angular: трубы и методы в модели
Я использую функции в моделях, как в этом примере:
//user.madel.ts
class User {
getFullname () {
return this.firstname + ' ' + this.lastName;
}
}
// in html I can do this:
<span> {{ user.getFullName() }} <span>...
605 просмотров
schedule
17.10.2022
Использование трубы фильтра в угловом 4
Я использую фильтрующую трубу в своем приложении angular 4. Но у меня проблема, так как я фильтрую внутри массива, но также и внутри этого массива. Итак, я не могу найти это конкретное имя ... поскольку я могу найти только первый массив, но не...
3457 просмотров
schedule
12.05.2022
Объединение трубы в Tr в реактивных формах
У меня очень простая проблема. Речь идет о написании трубы внутри тр в реактивных формах. у меня есть этот код
<tr *ngFor="let row of myForm.controls.rows.controls; "let i = index" [formGroupName]="i"| paginate: { itemsPerPage: 3,...
52 просмотров
schedule
27.03.2023
Angular: канал перевода — визуальный помощник
Итак, моя область применения заключается в том, что в режиме разработки я показываю на странице строки перевода (например, оранжевым цветом).
Итак, у нас есть канал перевода
import { Pipe, PipeTransform } from '@angular/core';
import {...
74 просмотров
schedule
05.04.2024
