角(4,5)还原-订阅数据-模型更改后视图未更新

时间:2019-07-03 22:31:56

标签: angular redux

我遇到了订阅方面的大问题(Angular)。
我从存储中选择数据。之后,我订阅了一个新对象(this.jEntry-在此对象中,我有来自api服务的属性“详细信息”调用, 我是控制台日志,我看到详细信息有列表数据,但对象详细信息仍为this.jEntry.datail = []。您可以通过图像查看。

查看

<ngx-datatable *ngIf="!loading" class="material" [rows]='this.gridItems' 
[columnMode]="'force'" [headerHeight]="50"
  [footerHeight]="0" [rowHeight]="'auto'">

  <ngx-datatable-column headerClass="border-right" cellClass="border-right" name="Account"  
    prop="accountName" [draggable]="false" [resizeable]="false" [headerTemplate]="filterContentTpl">
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{value}}
    </ng-template>
  </ngx-datatable-column>
  
</ngx-datatable>  

组件

import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter,
  TemplateRef,
  OnChanges,
  SimpleChanges,
  ChangeDetectionStrategy,
  ViewEncapsulation,
  ViewChild,
  NgZone
} from "@angular/core";
import {
  FormBuilder,
  FormGroup,
  FormArray,
  Validators,
  AbstractControl,
  
} from "@angular/forms";
import { Subscription, Observable, Subject } from "rxjs";
import { DatePipe } from "@angular/common";
import { UtilService } from "../../../shared/utility/utility.service";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import * as jentryActions from "../../../shared/store/journalentry/journalentry.action";
import { Store } from "@ngrx/store";
import * as store from "../../../shared/store/";

import { FaceSheetSandbox } from "../../../shared/sandbox/facesheet.sandbox";
import { debounceTime } from 'rxjs/operators';
import { ActivatedRoute, Router } from "@angular/router";
import { NotificationsService } from "angular2-notifications";

import * as journalentryActions from "../../../shared/store/journalentry/journalentry.action";
import { JournalEntryApiClient } from "../../../apis/journalentry-api-client.service";
import {
  User,
  JEntrySearch,
  JEntry,
  JEDetail,
  FiscalMonthModel,
  BillingAccountModel
} from "../../../shared/models";

import * as util from "../../../shared/utility/utility-helpers";
import { s } from "@angular/core/src/render3";
import {
  filterBy,
  getFilterOptions,
  getFilterDefaultValues,
  getFilterCurrencyMask
} from '../../../shared/utility/filtering';
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
import moment = require("moment");
@Component({
  selector: "app-journal-entry-child",
  templateUrl: "./journal-entry-child.component.html",

  encapsulation: ViewEncapsulation.None
})
 
export class JournalEntryChildComponent implements OnInit {
 
  subscriptions: Subscription[] = [];
  jEData$: Observable<JEntry[]>;
  
  jEntry$: any;
  jEntry: JEntry;
  gridItems = [];
  facilityId = null;
 
  currencyMask = getFilterCurrencyMask;
  constructor(private notificationsService: NotificationsService
              , private appState$: Store<store.RootState>
              , private zone: NgZone) {}

  ngOnInit() {
    this.jEntry$ = this.appState$.select(store.getGLCurrentEntry);

    this.subscriptions.push(
      this.jEntry$.subscribe(data => {
        this.zone.run(() => {
          this.jEntry = data;
          console.log("chekc data here", data);
          this.filter();
        });
       
      })
    );

    this.subscriptions.push(
      this.filterSubject.pipe(debounceTime(10000)).subscribe(() => {
        this.filter();
      })
    );
    
    
   filter() {
    let data = this.jEntry.detail; 
    this.gridItems = [...data];
    console.log("check grid", this.gridItems, this.jEntry,                   this.jEntry.detail);
  }
  }
  
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>

a busy cat ![两个木偶] [1]

请帮帮我。

0 个答案:

没有答案