Как я могу наблюдать за изменением значения в угловых 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 является массивом, а не примитивным типом, т. е.(string, boolean, int и т. д.) Существует три способа решения этой проблемы:

1. Выполните следующие строки кода после data в вашей логике изменения, которые будут назначать новый объект data, который назовет трубу т.е. trasnform Функция pipe будет выполнена, и вы получите в ней новое значение источника данных:

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

Просто запустите три строки выше при каждом обновлении this.data т.е.

2.Измените свою трубу на нечистую. Однако это будет неэффективно, потому что преобразование будет вызываться каждый раз, когда обнаружение изменения угловых прогонов замедляет работу вашего приложения. Вы можете сделать это следующим образом, т.е. установить чистый флаг в false в @Pipe декоратор:

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

3. Используйте временный аргумент примитивного типа для канала и обновите его значение при изменении data что приведет к выполнению функции преобразования pipe с новым источником данных, например, в вашем html:

Добавьте его в функцию преобразования, т.е.

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

И меняйте его значение всякий раз, когда data меняется в вашей логике.