Question

概述：
我有一个* ngFor循环，它运行一个数组toggle()并创建一个复选框列表。我正在创建一个函数Cannot read property 'fvA' of undefined at new FIlterWidgetCategoryComponent，以便只显示列表中的复选框和整个列表。

错误：
当我尝试创建一个包含数组的变量时，我收到一个错误。我得到的错误是

toggle()

但是，我不明白为什么我不能访问这个属性？我在mainData = this.ftr.fvA;函数中使用相同的export class FilterWidgetCategoryComponent implements OnInit { @Input() public objectTypeName: string; @Input() public objectTypeID: number; @Input() public ftr: Filter; isFullList: boolean = true; data: Array<any> = []; // mainData = this.ftr.fvA; /*Returns an error*/ //public filterOverlay = false; constructor( private _qpSvc: QueryPageService, private _element: ElementRef, private zone:NgZone ) { this.isFullList = true; // this.data = mainData; /*need to access mainData here*/ } ngOnInit() { } onChangeCheckbox1(ftr: Filter, fv:Query__Filter_Value) { let curr = ftr.fvSelectedH[fv.id_Header_Value_ID]; ftr.fvSelectedH[fv.id_Header_Value_ID] = !curr; // console.log("ftr: " + ftr); // console.log("ftr.fva: " + ftr.fvA); } get selectedChecked(){ console.log("selected checked: " + this.data); return this.data.filter(opt => opt.value); } toggle(){ var mainData = this.ftr.fvA; let curr = this.ftr.fvSelectedH; if (!this.isFullList) { this.data = [this.ftr.fvA]; console.log("Now a Fulllist: " + this.data); } else { this.data = [...this.selectedChecked]; // console.log("Now a checked list: " + curr); } this.isFullList = ! this.isFullList } }创建了一个变量，我不再收到错误了。
但我需要我的变量在我的函数之外，因为我的构造函数需要访问它。

ts档案：

<div id="chkboxList">
      <ul id="headerList">

       <li *ngFor="let ftrVal of data | filterArray:term:ftr"> 
  <!-- <li *ngFor="let ftrVal of ftr.fvA | filterArray:term:ftr"> -->

 <div id="getCheckBoxes">

  <input id="{{ftrVal.id_Header_Value_ID}}" class="mycheckbox" type="checkbox" name="items" value="{{ftrVal.id_Header_Value_ID}}"
                                      [checked]="ftr.fvSelectedH[ftrVal.id_Header_Value_ID]"
                                      (change)="onChangeCheckbox1(ftr, ftrVal)"
                                      >
                                  {{ftrVal.txt_Header_Value}} 

                              </div>
                          </li>
                      </ul>
                  </div>
<button id="btnColEx" type="button" (click)="toggle()">Expand</button>

html文件：

    $("#form1").submit(function(e) {
        //LADO SERVIDOR (ARQUIVO PHP) https://pt.stackoverflow.com/questions/15661/receber-ajax-json-post-no-php-e-retornar-no-sucesso
        e.preventDefault();
        var identificador = $(nome      )[0].value;
        var descricao     = $(descricao )[0].value;
        var password      = $(password  )[0].value;
        $('.somename').each(function(e){
            if($(this).is(':checked'))
            list = list + $(this).attr('id')+",";
        }); 
        $.getJSON('******/get?code=3001&desc='+descricao+'&key='+password+'&format=json&charset=utf-8&lang=pt_br', function(data){});
        $.getJSON('********/get?code=3004&id='+identificador+'&sr='+list+'&format=json&charset=utf-8&lang=pt_br', function(data){});
        alert(list);
    });

Answer 1

它的发生是因为你的模板试图根据尚未实例化的组件中的输入来渲染某些东西。模板尝试在组件加载时立即渲染。除非你告诉它，否则它不会真正等待输入。

您可以尝试添加* ngIf语句，该语句在this.ftr存在之前不会呈现模板的该部分。

<ul id="headerList" *ngIf="this.ftr">

或者您可以尝试将输入实例化为组件中的某个默认值，因此在首次呈现模板时会有某种回退。我不熟悉'过滤器'对象，所以我不知道默认/空白过滤器是什么样的。

Angular2：无法读取“组件”中未定义的属性“prop”

1 个答案: