Das Problem der Bindung der Eigenschaften Angular 4

Question

Ich arbeite an Angular 4 Upgrade und habe einige Probleme mit dem Niggling. Ich bekomme den folgenden Fehler und bin mir nicht sicher, was das Problem ist. Ich kann den Verweis auf das Modul statement-selector.component in risikotoleranz statements.component

Der Fehler wird wie folgt sehen

Can't bind to 'riskToleranceStatements' since it isn't a known property of 'rtq-statement-selector'. 
1. If 'rtq-statement-selector' is an Angular component and it has 'riskToleranceStatements' input, then verify that it is part of this module. 
2. If 'rtq-statement-selector' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <rtq-statement-selector *ngIf="showStatementSelectPopup" 

risikotoleranz statements.component

import {Component, ViewChild, EventEmitter,ViewContainerRef} from '@angular/core'; 
import { RunService,ClientService,UserService,AnalyticsService,ModalService} from '@wtw/platform/services'; 
import { Dto} from '@wtw/platform/api'; 
import {Observable} from 'rxjs/rx'; 
import { IAnalyticsSendInput} from '@wtw/platform/interfaces'; 
import { Base,ChangeTracking as CT} from '@wtw/toolkit'; 
//import {PdfLinkDirective} from '@wtw/toolkit/directives'; 
import {Indexer} from '../../interfaces/indexer'; 
import {OptionsSelectorComponent} from './options-selector/options-selector.component'; 
import {OptionDisplayComponent} from './option-display/option-display.component'; 
import {OptionSectionDisplayComponent} from './option-section-display/option-section-display.component'; 
import {StatementSelectorComponent} from './statement-selector/statement-selector.component'; 
import {RunViewModel, StatementOption, Metric} from '../../api/generated/RunViewModel'; 
import {OnForwardNavigation} from '@wtw/platform/interfaces'; 
import {MetricChartComponent} from '../../shared/charts/metric-chart.component'; 
import {CoreModalComponent} from '@wtw/platform/components/core-modal/core-modal.component'; 



@Component({ 
    moduleId: module.id, 
    templateUrl: 'risk-tolerance-statements.component.html', 
    styleUrls: ['../../shared/style/site.css', '../../styles/rtc.css'] 
}) 
export class RiskToleranceStatementsComponent extends Base.ReactiveComponent implements OnForwardNavigation { 

    metricMap: Indexer<Metric> = {}; 
    runInformation: Dto.RunInfo; 
    runModel: RunViewModel; 
    selectedOption: StatementOption; 
    metricChartOptions: any = JSON.parse("{ \"chart\": { \"height\":260, \"type\":\"scatter\",\"marginTop\":30 },\"title\": { \"text\": \"\"}, \"legend\": {\"enabled\":false},\"credits\": {\"enabled\": false},\"series\": [{},{ \"type\": \"scatter\", \"marker\": {\"enabled\": false}}], \"xAxis\":{\"endOnTick\": true, \"startOnTick\": true, \"minPadding\": 0.2, \"maxPadding\": 0.2,\"labels\":{\"enabled\":true},\"gridLineWidth\": 0,\"gridLineColor\": \"black\",\"minorGridLineWidth\": 0,\"tickColor\": \"black\",\"title\":{\"text\":\"Size of Loss\",\"useHtml\":true}}, \"yAxis\":{\"startOnTick\":true,\"tickInterval\":5, \"endOnTick\":true,\"min\":0,\"labels\":{\"enabled\":true},\"title\": {\"text\": \"Metric Scores Before Loss\",\"useHtml\":true,\"align\":\"high\",\"rotation\":0,\"y\":-15,\"offset\":-110}}, \"plotOptions\": { \"scatter\": {\"marker\": { \"radius\": 15,\"enabled\": true}}},\"tooltip\": {\"enabled\":true,\"pointFormat\": \"score:{point.y}value:{point.x}\"} }"); 
    riskToleranceStatementChartOptions: any = { 
     showSlider: false, 
     showPlotLineLabel: true, 
     isStressTest: false 
    }; 

    selectedStatementOptionDisplay: StatementOption; 
    showStatementSelectPopup = false; 
    showModifyOptionPopup = false; 
    statementsSelectedEvent = new EventEmitter<any>(); 
    statementsSelectedObservable:() => Promise<any>; 
    riskToleranceStatements: StatementOption[]; 
    bellCurveChartData: any = {}; 
    selectedOptionId: number; 
    selectedComment: StatementOption; 
    currencyInformation: Dto.CurrencyInfo; 

    @ViewChild(MetricChartComponent) private metricChartComponent: MetricChartComponent; 
    //@ViewChild(PdfLinkDirective) private pdfDirective: PdfLinkDirective; 

    constructor(private viewRef:ViewContainerRef,public runService: RunService, private _modalService: ModalService, private googleAnalyticSevice: AnalyticsService, private clients: ClientService, private user: UserService) { super(); } 

    ngOnInit() { 
     const runServiceSubscription = this.runService.activeRun 
      .filter((run: any) => !!run) 
      .subscribe((run: any) => { 
       this.runInformation = run.info; 
       this.currencyInformation = run.currencyInfo; 
       this.updateRunModel(run.data); 
       this.bellCurveChartData = { 
        options: run.data.chartDefinitions.metricPickerChartOptions, 
        data: run.data.chartDefinitions.bellCurveChartData 
       } 
      }); 

     this._subscriptions.push(runServiceSubscription); 
     this.statementsSelectedObservable = this.getstatementSeletedObservable; 
     this.triggerGoogleAnanlyticsEvent(); 
    } 

    reload(run: RunViewModel) { // After currency change 
     this.updateRunModel(run); 
     this.metricChartComponent.reloadChart(run); 
     this.updateSelectedRiskToleranceThreshold(); 
    } 

    apply() { 
     this.runService.executeTrigger(this.runInformation.runId, this.runModel, 3, this.currencyInformation, 'risk-tolerance-statements'); 
     this.triggerGoogleAnanlyticsEvent(); 
    } 

    /** 
    * Function to push to the platform to be envoked when the pdf button is clicked. 
    * The promise chain to be resolved with statement selector popup close event 
    */ 
    getstatementSeletedObservable =() => { 

     const applyOptionIdsPromise: Promise<any> = new Promise((resolve: any) => { 
      this.runModel.riskToleranceStatements.options = this.riskToleranceStatements 
       .map((option: StatementOption, index: number) => { 
        option.id = index; 
        return option; 
       }); 
      resolve(); 
     }); 

     const saveRunPromise: Promise<any> = this.runService 
      .persist(this.runInformation.runId, this.runModel, this.currencyInformation, null, true) 
      .do(() => this.showStatementSelectPopup = true) 
      .do(() => console.debug('Run saved')) 
      .toPromise(); 

     const selectedStatementEventPromise = this.statementsSelectedEvent.take(1).toPromise(); 

     return Promise.all([applyOptionIdsPromise, saveRunPromise, selectedStatementEventPromise]) 
      .then((retVals) => retVals[2]); 

    }; 

    optionSelected(option: StatementOption) { 
     this.riskToleranceStatements.map((statement: StatementOption) => { 
      statement.selected = statement.id === option.id; 
     }); 
     this.refresh(); 
    } 

    optionRemoved(option: StatementOption) { 
     this._modalService.confirm(this.viewRef,'MODAL.TEST') 
      .then((shouldRemove: boolean) => { 
       if (shouldRemove) this.removeOption(option); 
      }); 
    } 

    statementsSelected(selectResult: any) { 
     this.statementsSelectedEvent.emit(selectResult); 
     this.showStatementSelectPopup = false; 
    } 

    showOptionDiplayPopup(statementOption?: StatementOption) { 

     if (!statementOption) { 
      statementOption = (Object.assign({}, this.runModel.riskToleranceStatements.vanillaOption) as StatementOption); 
      statementOption.selected = false; 
      statementOption.id = null; // New, unconfirmed option. No Id set until form complete 
     } 

     this.selectedStatementOptionDisplay = statementOption; 
     this.showModifyOptionPopup = true; 
    } 

    optionChange(selectedOption: StatementOption) { 

     this.showModifyOptionPopup = false; 
     let runMatlabApply = false; 

     if (!selectedOption) return; // cancelled change, just ignore 

     this.riskToleranceStatements.map((option: StatementOption) => option.selected = false); 
     selectedOption.selected = true; 

     if (!selectedOption.id) { 
      // new option 
      selectedOption.id = (this.riskToleranceStatements.length + 1) || 1; 
      this.riskToleranceStatements.push(selectedOption); 
      runMatlabApply = true; 
     } else { 
      // modified option 
      let selectedRiskToleranceIndex: number; 
      const matchingOption = this.riskToleranceStatements.find((option: StatementOption, index: number) => { 
       if (option.id !== selectedOption.id) return false; 
       selectedRiskToleranceIndex = index; 
       return true; 
      }); 
      if (!matchingOption) throw new Error("Unable to find matching statement option from display"); 
      runMatlabApply = matchingOption.riskToleranceThreshold !== selectedOption.riskToleranceThreshold || matchingOption.selectedTimeHorizon !== selectedOption.selectedTimeHorizon; 
      this.riskToleranceStatements[selectedRiskToleranceIndex] = selectedOption; 
     } 

     this.refresh(); 
     if (runMatlabApply) this.apply(); 
    } 

    private updateRunModel(run: RunViewModel) { 
     this.runModel = run; 
     this.runModel.metrics.map(m => this.metricMap[m.id] = m); 
     this.riskToleranceStatements = this.runModel.riskToleranceStatements.options || []; 
     this.metricChartComponent.reloadChart(this.runModel); 

     if (!this.riskToleranceStatements.length) return this.showOptionDiplayPopup(); 

     const selectedOption = this.riskToleranceStatements.find((option: StatementOption) => { 
      return option.selected; 
     }); 

     if (!selectedOption) { 
      this.selectedOption = this.riskToleranceStatements[0]; 
      this.selectedOption.selected = true; 
     } 

     this.metricChartComponent.reloadChart(this.runModel); 
     this.refresh(); 

    } 

    private generateChartPlotlines(): any[] { 

     const plotItems = this.riskToleranceStatements 
      .filter((option: StatementOption) => { 
       return !!option.riskToleranceThreshold; 
      }) 
      .map((option: StatementOption, index: number) => { 
       return { 
        value: option.riskToleranceThreshold, 
        label: index + 1, 
        focus: option.selected, 
        index: index 
       }; 
      }); 

     return plotItems; 
    } 

    private removeOption(option: StatementOption) { 
     if (option) { 

      this.riskToleranceStatements = this.riskToleranceStatements.filter((statement: StatementOption) => { 
       return statement.id !== option.id; 
      }); 

      this.runModel.riskToleranceStatements.options = this.riskToleranceStatements.filter((statement: StatementOption) => { 
       return statement.id !== option.id; 
      }); 

      this.runService 
       .persist(this.runInformation.runId, this.runModel, this.currencyInformation, null, true) 
     } 


     this.refresh(); 
    } 

    private updateSelectedRiskToleranceThreshold() { 
     this.riskToleranceStatements 
      .filter((option) => option.selected) 
      .map((option) => this.selectedOption = option); 
    } 

    private refresh() { 
     this.reassignStatementIds(); 
     const chartPlotLines = this.generateChartPlotlines(); 
     this.metricChartComponent.refreshPlotlines(chartPlotLines); 
     // if (this.pdfDirective) this.pdfDirective.beforeGenerate = this.getstatementSeletedObservable; 
    } 

    private reassignStatementIds() { 
     this.riskToleranceStatements.map((option: StatementOption, index: number) => { 
      option.id = index + 1; 
     }); 
     var statements: StatementOption[] = JSON.parse(JSON.stringify(this.riskToleranceStatements)); 
     var actualSelected = statements.find(o => o.selected); 
     var sorted = statements.sort((pre, curr) => pre.riskToleranceThreshold - curr.riskToleranceThreshold); 
     this.selectedOptionId = sorted.indexOf(actualSelected) + 1; 
     this.selectedComment = actualSelected; 
     this.runModel.riskToleranceStatements.options = this.riskToleranceStatements; 
    } 

    onForwardNavigation(): void { 
    } 

    triggerGoogleAnanlyticsEvent() { 
     let sendInput:IAnalyticsSendInput= { 
      eventAction:'Risk Tolerance Statements Trigger', 
      eventCategory:'Trigger', 
      runId:this.runInformation.runId, 
      addtionalFields:{ 
       user: this.user.currentUserInfo.encryptedUser, 
       clientId:this.runInformation.clientId 
      } 
     } 
     this.googleAnalyticSevice.send(sendInput,true); 
    } 
} 

anweisungs selector.component

import {EventEmitter, Output, Input, OnInit, Component} from '@angular/core' 
//import {ToastsManager} from 'ng2-toastr'; 


import {StatementOption, SelectOption} from '../../../api/generated/RunViewModel'; 
import {RoundCheckboxComponent} from '../../../shared/round-checkbox/round-checkbox.component'; 

@Component({ 
    moduleId: module.id, 
    selector: 'rtq-statement-selector', 
    templateUrl: 'statement-selector.component.html', 
    // directives: [ 
    //  RoundCheckboxComponent 
    // ], 
    styleUrls: ['statement-selector.component.css'] 
}) 
export class StatementSelectorComponent implements OnInit { 

    statements: any[]; 

    @Input() maxStatements: number = 3; 
    @Input() private riskToleranceStatements: StatementOption[] = []; 
    @Output() complete: EventEmitter<any> = new EventEmitter<any>(); 

    // constructor(private toastr: ToastsManager) { } 

    ngOnInit(): any { 
     this.statements = this.riskToleranceStatements.map((statement: any, index: number): any[] => { 
      const item = statement; 
      item.isSelected = (index + 1) <= this.maxStatements; 
      const selectedCompany = statement.company.find((company: SelectOption) => { 
       return company.selected; 
      }); 
      if (selectedCompany && selectedCompany.friendlyName) item.selectedCompany = selectedCompany.friendlyName; 
      return item; 
     }); 
    } 

    cancelClicked() { 
     this.complete.emit(false); 
    } 

    okClicked() { 
     const selectedIds = this.statements 
       .filter((statement: any) => statement.isSelected) 
       .map((statement: any) => statement.id) 
       .join(","); 

     const selectedStatementIds = { selectedStatementIds: selectedIds }; 
     this.complete.emit(selectedStatementIds); 
    } 

    togs(statement: any) { 
     const isSelected: boolean = statement.isSelected; 

     const selectedCount = this.statements 
      .filter((statement: any) => { 
       return statement.isSelected; 
      }) 
      .length; 

     if (isSelected) { 
      if (selectedCount <= 1) { return; } 
     } else { 
      if (this.maxStatements && selectedCount === this.maxStatements) { return; } 
     } 

     statement.isSelected = !isSelected; 
    } 
} 

Risiko-Toleranz-statements.component.html

<div id="pageConstrainer"> 

    <div class="grid" style="position: fixed; width: inherit; max-width: inherit; z-index: 5"> 
     <div class="col-dt-1 col-ipl-1 col-ipp-1" style="padding-right: 0px;"> 
      <!--<a pdf-link="risk-tolerance-statement-report" [runId]="runInformation?.runId" [beforeGenerate]="statementsSelectedObservable" style="display: block; position: absolute; right: 3px; top: 3px;"></a>--> 
      <currency-selector (selectedCurrencyChange)="reload($event.run)"></currency-selector> 
     </div> 
    </div> 

    <div class="grid grid-padded" style="padding-top: 32px;"> 

     <rtq-statement-selector *ngIf="showStatementSelectPopup" (complete)="statementsSelected($event)" [riskToleranceStatements]="riskToleranceStatements"></rtq-statement-selector> 
     <rtq-option-display *ngIf="showModifyOptionPopup" [option]="selectedStatementOptionDisplay" [timeHorizons]="runModel?.riskToleranceStatements?.timeHorizons" (optionDisplayStatusChange)="optionChange($event)"></rtq-option-display> 


     <div class="grid padded" style="background-color:#efeede;"> 
      <div class="col-dt-1 col-ipl-1 col-ipp-1 module"> 
       <div class="module-header"> 
        {{'STRESS_TEST_PAGE.SIZE_OF_LOSS.HEADER'|translate}} 
        <template #sizeOfLossHtmlTooltip> 
         <span [innerHTML]="'TOOLTIPS.STRESS_TEST.SIZE_OF_LOSS'|translate"></span> 
        </template> 
        <span class="help" style="margin-top: -10px;" [tooltip]="sizeOfLossHtmlTooltip"></span> 
       </div> 
       <div class="module-content border" style="min-height: 260px; position: relative"> 
        <metric-chart [runModel]="runModel" [options]="riskToleranceStatementChartOptions" [chartOptions]="metricChartOptions"></metric-chart> 
       </div> 
      </div> 
     </div> 

     <div class="grid padded"> 
      <div class="col-dt-1-4 col-ipl-1-4 col-ipp-1-4"> 
       <div class="sectionLabel left" [textContent]="'GENERAL.COMMENTS'|translate"></div> 
       <br/> 
       <br/> 
       <rtq-options-selector (optionRemoved)="optionRemoved($event)" *ngIf="riskToleranceStatements" [vanillaOption]="runModel?.riskToleranceStatements?.vanillaOption" [options]="riskToleranceStatements" (optionSelected)="optionSelected($event)" (optionEditDisplayClick)="showOptionDiplayPopup($event)"></rtq-options-selector> 
      </div> 
      <div class="module col-dt-3-4 col-ipl-3-4 col-ipp-3-4"> 
       <div class="module"> 
        <div class="module-header"> 
         Area of Concern Score After Threshold Event(s) 
         <!--<span class="help" [tooltip]="'TOOLTIPS.STRESS_TEST.SIZE_OF_LOSS'|translate"></span>--> 
        </div> 
        <div class="module-content border"> 
         <rtq-option-section-display [commentSections]="runModel?.commentSections" 
                [sections]="runModel?.sections" 
                [selectedCommentId]="selectedOptionId" 
                [selectedComment]="selectedComment"></rtq-option-section-display> 
        </div> 
       </div> 
      </div> 
     </div> 

    </div> 

</div> 

statement-Selektor-component.html

import {EventEmitter, Output, Input, OnInit, Component} from '@angular/core' 
//import {ToastsManager} from 'ng2-toastr'; 


import {StatementOption, SelectOption} from '../../../api/generated/RunViewModel'; 
import {RoundCheckboxComponent} from '../../../shared/round-checkbox/round-checkbox.component'; 

@Component({ 
    moduleId: module.id, 
    selector: 'rtq-statement-selector', 
    templateUrl: 'statement-selector.component.html', 
    // directives: [ 
    //  RoundCheckboxComponent 
    // ], 
    styleUrls: ['statement-selector.component.css'] 
}) 
export class StatementSelectorComponent implements OnInit { 

    statements: any[]; 

    @Input() maxStatements: number = 3; 
    @Input() private riskToleranceStatements: StatementOption[] = []; 
    @Output() complete: EventEmitter<any> = new EventEmitter<any>(); 

    // constructor(private toastr: ToastsManager) { } 

    ngOnInit(): any { 
     this.statements = this.riskToleranceStatements.map((statement: any, index: number): any[] => { 
      const item = statement; 
      item.isSelected = (index + 1) <= this.maxStatements; 
      const selectedCompany = statement.company.find((company: SelectOption) => { 
       return company.selected; 
      }); 
      if (selectedCompany && selectedCompany.friendlyName) item.selectedCompany = selectedCompany.friendlyName; 
      return item; 
     }); 
    } 

    cancelClicked() { 
     this.complete.emit(false); 
    } 

    okClicked() { 
     const selectedIds = this.statements 
       .filter((statement: any) => statement.isSelected) 
       .map((statement: any) => statement.id) 
       .join(","); 

     const selectedStatementIds = { selectedStatementIds: selectedIds }; 
     this.complete.emit(selectedStatementIds); 
    } 

    togs(statement: any) { 
     const isSelected: boolean = statement.isSelected; 

     const selectedCount = this.statements 
      .filter((statement: any) => { 
       return statement.isSelected; 
      }) 
      .length; 

     if (isSelected) { 
      if (selectedCount <= 1) { return; } 
     } else { 
      if (this.maxStatements && selectedCount === this.maxStatements) { return; } 
     } 

     statement.isSelected = !isSelected; 
    } 
} 

Answer 1

Sie riskToleranceStatements Eigenschaft als privat markiert ist und als solche kann nicht verwendet werden in einer Vorlage. Die Lösung wäre, es zu einem öffentlichen Eigentum zu machen.