Question

好吧，我读过很多例子，但是我并没有完全把它们放在一起。我的目标是创建一个显示Context项目的粗网格的组件。这样我就可以编辑一些属性并将更改发送回去。但是，onChanges事件不会从其他地方捕获对地图的更改。我知道这与对象的可变性有关，但是我真正想了解的是我应该对此做的事情。我已经找到了doCheck，但它似乎也没有检测到更改。

我有以下对象：

export class PlanContext {

    selectedPlans: Map<number, ContextItem>;

    constructor() {
      this.selectedPlans = new Map<number, ContextItem>();
    }  

  addAllFromList(plans: Plan[]) {
    plans.forEach(v => {
    if (!this.isPlanSelected(v))
    this.addPlan(v);
   });
 }
// Functions Surrounding using the selectedPlans.

这是容器HTML

<div class="collapse w-100 show" [ngbCollapse]="!(planOpen$ | async)" aria-expanded="true">
   <div class="card w-100 text-left">
      <plancontextsummary-form [(planContext)]="plancontext"></plancontextsummary-form>
   </div>
</div>

相应的组件

export class ReadPlanContextSummaryPageComponent  {
  public planOpen$: Observable<boolean>;

  private _planContext: PlanContext;


  @Input()
  public set planContext(value: PlanContext) {
     this._planContext = value;
  }

  public get planContext(): PlanContext {
     return this._planContext;
  }

  constructor(public store: Store<fromRoot.State>) {
     this.planOpen$ = store.select<boolean>(fromRoot.getPlanSummaryOpen);
  }
}

这是我在苦苦挣扎的表格。

export class PlanContextSummaryFormComponent implements DoCheck {

  @Input()
  planContext: PlanContext;

  differ: any;

  @Output()
  save  = new EventEmitter<any>();

    constructor(protected fb: FormBuilder, private differs: IterableDiffers ) {
     this.differ = differs.find({}).create(null);
     this.createForm();
  }



  //ngOnChanges(changes: SimpleChanges) {
  //  if (!this.planContext) {
  //    console.info("Still not detecting Input");
  //    //this.planContext = this.buildFakeContext();  // TODO: Remove Temp to make sure From functions correctly
  //  }

  //  for (let propName in changes) {
  //    console.info("Rebuilding " + this.planContext);
  //    if (propName === 'planContext') {
  //      if (this.planContext) {
  //        this.rebuildForm();
  //        this.isLoaded = true;
  //      }
  //    }
  //  }
  //}

  ngDoCheck() {
   ///TODO: STOP BEING STUCK
  }
}
//Form Logic

PlanContextSummaryFormComponent是PlanContext起源的孙代。

根据要求的祖父母：

export class FindPlanPageComponent extends BaseComponent implements OnInit {
 businessUnits$: Observable<BusinessUnit[]>;
 plans$: Observable<Plan[]>;
 wellLifeCycleStageGates$: Observable<WellLifeCycleStageGate[]>;


 planContext: PlanContext;


 constructor(public store: Store<fromRoot.State>) { 
super();

     this.planContext = new PlanContext();

     this.wellLifeCycleStageGates$ = store.select<WellLifeCycleStageGate[]> 
     (fromRoot.getAllWellLifeCycleStageGates);
this.businessUnits$ = store.select<BusinessUnit[]> 
     (fromRoot.getAllBusinessUnits);
this.plans$ = store.select<Plan[]>(fromRoot.getAllPlans);
}

ngOnInit() {
  this.store.dispatch(new BusinessUnitActions.Load());
  this.store.dispatch(new WellLifeCycleStageGateActions.Load());
  this.store.dispatch(new PlanActions.Search(null));
}

search(searchParameters: SearchParameters) {
  this.store.dispatch(new PlanActions.Search(searchParameters));
  this.clearPlanList();
}


 clearPlanList() {
    this.plans$.subscribe(plans => {
     this.planContext.clearList();
  });
}


addAllPlanList() {
  //this.planContext;
  this.plans$.subscribe(plans => {
    this.planContext.addAllFromList(plans);
  });
} 
  saveContext() {
console.info("Saving Context: " + this.planContext);

}

showPlanSummary() {
 this.store.dispatch(new LayoutActions.ShowPlanSummary());
}

具有地图属性的对象的角度变化检测

0 个答案: