我已经为组件[grid]创建了自定义管道。在管道声明内部,我可以使用我的组件实例,但同时如果管道声明内部的数据源值发生变化,我想获取。有可能得到吗?
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { GridAllModule } from '@syncfusion/ej2-angular-grids';
import { NumericTextBoxAllModule } from '@syncfusion/ej2-angular-inputs';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent, DefaultPipe, DefaultPipe1 } from './app.component';
@NgModule({
declarations: [
AppComponent,
DefaultPipe,
DefaultPipe1
],
imports: [
BrowserModule, GridAllModule, ToolbarModule, NumericTextBoxAllModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
app.component.ts
import {
NgModule, Component, Pipe, PipeTransform, OnInit, Input, IterableDiffers, DoCheck,
ViewChild, ChangeDetectorRef, SimpleChanges, WrappedValue, SimpleChange, OnChanges
} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { orderDetails } from './data';
import { orderDetails1 } from './datas';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
// import { SidebarService } from './service';
@Pipe({ name: 'defaultImage' })
export class DefaultPipe implements PipeTransform {
transform(value: string, fallback: string, ): string {
let image = '';
if (value) {
image = value;
} else {
image = fallback;
}
return image;
}
}
@Pipe({
name: 'defaultImage1',
pure: false
})
export class DefaultPipe1 implements PipeTransform {
constructor(private _ref: ChangeDetectorRef) { }
transform(value: string, fallback: string, ): string {
// let Data1 = '';
// if (value.length !== 0) {
// Data1 = value;
// } else {
// Data1 = fallback;
// }
// return Data1;
}
}
@Component({
selector: 'app-my',
template: `
<img [src]="imageUrl | defaultImage:'http://s3.amazonaws.com/uifaces/faces/twitter/sillyleo/128.jpg':true"/>
<div class="control-section">
<ejs-grid #gridref id='check' [dataSource]='data | defaultImage1:gridref' height='350'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
<e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
</e-columns>
</ejs-grid>
</div>
`
})
export class AppComponent implements OnInit, DoCheck {
imageUrl: String = '';
public data: Object[] = [];
@ViewChild('gridref')
public refGrid: GridComponent;
ngOnInit(): void {
this.data = orderDetails;
}
}
在这里,我已如下初始化管道:
<ejs-grid #gridref id='check' [dataSource]='data | defaultImage1:gridref' height='350'>
我已经尝试过这种[http://blog.bogdancarpean.com/how-to-watch-for-changes-an-arrayobject-on-angular-2/],但我无法达到我的要求
@Input() data: Object[] = [];
differ: any;
constructor(differs: IterableDiffers) {
this.differ = differs.find([]).create(null);
}
ngDoCheck() {
const change = this.differ.diff(this.data);
console.log(change);
}
在这种情况下,我怎么能达到我的要求。请提供任何想法。
答案 0 :(得分:1)
有两种类型的管道。纯净和不纯净。对于纯管道,仅当angular检测到传递给管道的值或参数发生变化时才调用管道的变换函数。在不纯管道中,无论管道的值或自变量是否发生更改,都会在每个更改检测周期调用该方法。
由于您的管道是纯管道,因此不会调用transform函数,因为datasource
是对象数组,因此angular不会检测到其值被修改,因为value即data
是一个数组,而不是原始类型ie(字符串,布尔值,整数等),您可以通过三种方式解决此问题:
1。在逻辑更改中的data
之后执行以下代码行,这将为data
分配一个新对象,这将调用管道,即管道的trasnform
功能执行,您将在其中获得数据源的新值:
var tempVar= this.data;
this.data= [];
Object.assign(this.testVal, tempVar);
只要更新this.data
即
2。将管道更改为不纯的。但是,这样做效率不高,因为每次角度运行变化检测时都会调用转换,这会使您的应用程序变慢。
您可以这样操作,即在@Pipe
装饰器中将pure标志设置为false:
@Pipe({
name: 'defaultImage',
pure: false
})
data
的更改更新其值,这将导致管道的变换功能使用新的数据源执行,例如在您的html中:
将其添加到转换函数中,即:
transform(value: string, fallback: string, tempParam)
并在逻辑中更改data
时更改其值。