我如何观察角度 4 的值变化？

Question

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

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

Answer 1

有两种类型的管道。纯与不纯。在纯管道的情况下，仅当 angular 检测到传递给管道的值或参数发生变化时，才会调用管道的转换函数。在不纯管道中，无论管道的值或参数是否发生变化，都会在每个变化检测循环中调用它。 由于您的管道是纯的，因此转换函数没有调用，因为datasource 是一个对象数组，所以角度没有检测到它的值被修改，因为值即data 是一个数组，而不是原始类型，即（字符串，布尔值， int 等）您可以通过三种方式解决此问题：

1.在您的逻辑更改data之后执行以下代码行，这将为data分配一个新对象，这将调用管道，即管道的trasnform函数将执行，您将获得数据源的新价值：

var tempVar= this.data; 
this.data= []; 
Object.assign(this.testVal, tempVar);

只要更新this.data 即只需运行以上三行即可

2.将您的管道改为不纯的。然而，这将是低效的，因为每次角度运行更改检测时都会调用转换，从而使您的应用程序变慢。 您可以这样做，即在 @Pipe 装饰器中将纯标志设置为 false：

@Pipe({
  name: 'defaultImage',
  pure: false
})

1. 为管道使用临时原始类型参数，并根据data 的变化更新其值，这将导致管道的转换函数使用新数据源执行，例如在您的 html 中：

将其添加到变换函数中，即：

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

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