Как я могу наблюдать изменение значения в угловых 4? - PullRequest
Новая
       27

Как я могу наблюдать изменение значения в угловых 4?

0 голосов
/ 13 ноября 2018

Я создал пользовательский канал для моего компонента [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 голосов
/ 13 ноября 2018

Существует два типа труб.Чистый и нечистый.В случае чистого канала функция преобразования канала вызывается только тогда, когда angular обнаруживает изменение значения или аргументов, переданных в канал.В нечистом канале он вызывается для каждого цикла обнаружения изменений независимо от того, изменяются ли значение или аргументы каналов.Поскольку ваш канал чистый, функция преобразования не вызывается, потому что datasource является массивом объектов, поэтому angular не обнаруживает изменение его значения, поскольку значение, т. Е. data, является массивом, а не примитивным типом, т. Е. (String, boolean,int etc) Существует три способа решения этой проблемы:

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

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

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

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

@Pipe({
  name: 'defaultImage',
  pure: false
})
Используйте аргумент типа временного примитива для канала и обновите его значение при изменении data, что приведет к выполнению функции преобразования канала с новым источником данных, например, в вашем html:

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

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

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

...