我如何看待角度4中的值变化?

时间:2018-11-13 05:10:44

标签: angular typescript observable angular2-custom-pipes

我已经为组件[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);
  }

  

在这种情况下,我怎么能达到我的要求。请提供任何想法。

1 个答案:

答案 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
})
  1. 对管道使用临时原始类型参数,并根据data的更改更新其值,这将导致管道的变换功能使用新的数据源执行,例如在您的html中:

将其添加到转换函数中,即:

transform(value: string, fallback: string, tempParam)

并在逻辑中更改data时更改其值。