Question

我有一个过滤器函数，可以更改app组件中数组的值。我想要的是每当这个函数改变数组的值时，数组将被复制到我的其他自定义组件，然后立即更改component.html（视图）文件。但现在的问题是，只有在再次调用过滤器函数后，才会在html / view文件中发生更改。有点击延迟。它给出了前一个函数调用的值。比如，如果我选中一个复选框，则表示阵列已更改，但只有在取消选中该复选框或进行其他选择时，才会更新自定义视图文件。下面是我的代码结构。任何建议将不胜感激。

服务档案

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class FilteredService {

  public recordChanges: Observable<any>;
  public recordObserver: Observer<any>;
  public invokeEvent: Subject<any> = new Subject();

  constructor() { }
}

应用程序组件文件

import { FilteredService } from './services/filtered.service';

export class AppComponent implements OnInit {
  public records$: Array<model.IProduct> = [];

  constructor(
  ...
     private filteredService: FilteredService,
  ...
  )

  ngOnInit() {

  '''
  this.otherService.filterParamChanges.subscribe(params => {
        this.onchangeRecords(params);
      });
  ...
  }


  onchangeRecords(params){
  ...
  ...
  changeRecordArray(params);
  this.filteredService.invokeEvent.next(this.records$);
  this.router.navigate(['/custom.html']);
 }
 ...
}

自定义ts文件

...
import { FilteredService } from '../../services/filtered.service';
@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.scss']
})

export class CustomComponent implements OnInit {

  public records$: Array<model.IProduct> = [];
  ...
  constructor(
  ...
    private filteredService: FilteredService,
   ...
  ) {  }


  ngOnInit() {
    this.filteredService.invokeEvent.subscribe((value) => {
      this.getFiltered(value);
    });
  }

  getFiltered(newRecords) {
    this.records$ = newRecords;
  }
}

自定义HTML

<ng-template ngFor let-product [ngForOf]="records$">
  ... display array values here ..
</ng-template>

Answer 1

我只更改样式和更少的东西，没有关于打字稿代码。

是的，路线，我不记得了。这就是全部

将数组值上的数组复制到另一个组件并更改组件视图

1 个答案: