标签: angular-pipe

我有 Angular 应用程序，作为它的一部分，我在 div 中显示查询结果（具有 JSONContainer 的 ID）。

我想突出显示结果中的特定查询，因此我使用了一个管道来搜索结果，并将文本中的 FIELD:VALUE 替换为：

<span class="highlightSpan">FIELD:VALUE</span>.

我将以下 css 添加到组件中：

div#JSONContainer span.highlightSpan{
    background-color: rgba(28, 243, 28, 0.5) !important;
    color:red !important;
    padding: 1px;
    margin:1px;
}

我尝试在 .highlightSpan 下添加相同的样式，得到相同的结果。

我使用存储整个 JSON 的“data”变量和存储查询的“query”变量，通过 insideHTML 插入此范围和其余文本：

    <div class="col-xs-12" id="JSONContainer"
        [innerHTML]="data | textHighlight:query">
    </div>

（我没有使用字符串插值，因为数据变量是 json 形状，我使用 html 代码对其进行样式设置，例如 html br 标记，并且字符串插值仅显示文本）。

当我将鼠标指向谷歌开发工具中的相关跨度时，我看到带有该类的跨度已创建：

但 css 样式没有应用，甚至没有显示在 google 开发工具中：

编辑：我知道它没有显示（我从 img 中删除了它），但跨度位于 div#JSONContainr 中，如所述。

编辑2：这是相关的树：

为什么会发生这种情况？

如何让css样式生效？

谢谢！

我在做什么：

html文件

 <div *ngFor='let result of results'>
    <div [ngClass]='{"myclass": someArray | inArray:result.id}'>
    </div>
    </div>

.ts 文件：

someArray = [1, 2, 3]

results = [
{id:1, name:'abc'},
{id:2, name:'xyz'},
{id:4, name:'pqr'}]

结果：我从来没有被分配过班级。

如何使用“as”将管道结果存储在html文件中以在ngClass中使用它？

inArray (pipe)：Pipe 根据数组中是否存在值返回 true 或 false。

参考Angular 2 根据管道结果添加样式：

更新1：

inArray (pipe)：Pipe 根据数组中是否存在值返回 -1 或索引值。

更新2： 堆栈闪电战

我有一个提供翻译管道的小型图书馆。如果我使用 Observables，一切都会很好。相关代码在这里：

https://gitlab.com/tobias47n9e/angular- Fluent/-/blob/master/projects/angular-fluid/src/lib/ Fluent.pipe.ts#L32

this.localizationChanges.subscribe(() => {
    this.fluentService
        .translationObservable(key, args, getLocale(args))
        .subscribe(value => this.value = value);
});

我想切换到 Promises，因此管道仅在加载语言环境并找到翻译后才切换值。但是，如果我将代码更改为以下内容，应用程序甚至无法再加载（它编译得很好）。

this.localizationChanges.subscribe(() => {
    this.fluentService
        .translate(key, args, getLocale(args))
        .then(value => this.value = value);
});

这是 Angular 不允许的事情吗？为什么它编译后最终显示一个空页面，甚至没有打印错误消息？

我在服务上有一个从服务器获取时间的方法，我打算在自定义管道中使用它。管道的目的是将时间戳记与当前时间进行比较，并以人类可读的格式返回它。

服务

export class TimeService{
  currentServerTime;

  fetchCurrentTimeStamp(){
     //http request using Observable
     return sendGETRequest(.....).map(data => {
        this.currentServerTime = data;

        return this.currentServerTime;
     })
  }
}

管

export class GetTimeFromNowPipe implements PipeTransform{

   fromNow;
   currentServerTime: number;
   constructor(private timeService: TimeService, private appSettings: AppSettings){}

   transform(value: number){
        var currentTime;
        this.timeService.fetchCurrentTimestamp().subscribe(data => {
            currentTime = data
            if(!value) return "";

            if(value){
               let newDate = moment.unix(value);
               this.fromNow = newDate.from(moment.unix(currentTime), true);
            }
          return this.fromNow;
        });

   }
}

的HTML

<ul>
    <li *ngFor = "let model of models">
        <span>{{model.created | getTimeFromNow}}</span>
    </li>
</ul> …

现在我使用:

<app ngxSlickItem *ngFor="let item of items" [item]="item"></app>

带出所有元素.但我需要带出4div元素.像这样:

<div>
<app ngxSlickItem *ngFor="let item of items" [item]="item"></app>
<app ngxSlickItem *ngFor="let item of items" [item]="item"></app>
<app ngxSlickItem *ngFor="let item of items" [item]="item"></app>
<app ngxSlickItem *ngFor="let item of items" [item]="item"></app>
</div>

我怎么能用ngFor做到这一点？我有一个滑块,我需要在开始时显示4个元素.

使用角度4

{{31.94 | number:'1.0-0'}} 

输出：32

任何想法，如何阻止四舍五入。预期结果是31

我已经阅读了这篇文章和这篇文章.我相信我已经完成了所有建议:将管道添加到共享的模块中.

但是,无论我做什么,我都无法获取模板来查找我创建的管道.我的应用程序已经有一个共享模块,其他模块导入,所以我创建管道并将其添加到共享模块:

我用它创建了它 ng g pipe /shared/pipes/safe --flat --module shared --spec=false

在SharedModule中,我还将它添加到declarations和providers.

一切都在运行,但我尝试使用管道,如:

<iframe width="600" height="360" [src]="video.acf.youtube_url | safe: 'url'" frameborder="0" allowfullscreen></iframe>

我刚收到一个错误

Error: Uncaught (in promise): Error: Template parse errors: The pipe 'safe' could not be found

管子本身就是

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) { } …

我创建了一个Pipe名为trim. 此管道旨在从字符串中删除最后一个字符。这是我的管道类TrimPipe。在 HTML 中使用管道时，控制台不会记录这些值。这里的 HTML 用法 -

<ng-container *ngFor="let bg of backgrounds.preferred">
       <span>{{bg.name ? (bg.name + ', ') : '' | trim}}</span>
   </ng-container>

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'trim'
})
export class TrimPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    console.log(value, args, 'Pipes');
    return value.toString().substring(0, value.length - 1);
  }

}

我的app.module.ts档案——

import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {FormsModule} from …

我一直认为这slice是纯粹的,它比slice字符串或数组上的调用方法的唯一优势是Angular中纯管道的缓存机制.

事实证明并非如此,slice并且不纯洁.此外,实现是非常基本的:它防止nulls和代理slice方法.没有内部比较最后转换的输入.

我怀疑它的设计与行为一致ngFor,但这是一个可行的原因吗？新人会抱怨Angular被打破了,否则我想,但是为什么我应该使用这个管道呢？

我是否正确,它在每次更改检测运行中创建新数组,这导致甚至触发OnPush三次更改检测并使性能优化无效？

编辑:这个问题是基于一个人应该使用不可变数据的假设.

我正在寻找一个像下面这样转换的管道，只是想四舍五入 2 个小数点。

我试过了[ngModel]="item.value | number number:'1.0-X'"，但不是在所有情况下都有效

239.779 > 239.78
0.674 > 0.67
35355.453 > 35355.45