Question

我正在尝试对在angular 7应用程序中单击编辑按钮时生成的动态表进行切换。我正在显示垂直的列行。我有一个编辑按钮，单击编辑按钮应该可以让我在两个TDS之间切换。一个td显示只读值，而另一个td显示控件我目前收到错误消息，表示表单控件具有未指定名称属性的无值访问器。不确定为什么吗？

如果您在下面的html中注意到，则在InvestedAmount字段中只有ngIf，并且按钮Edit具有绑定到组件中EditMode属性的NgModel

这是我的HTML

<div>
        <input type="checkbox"   id= "chk"  style="width: 13px; height: 13px;"  /> 
        <label for="chk" >Invested</label>

</div>

<div class="card">
        <div class="card-header panel-heading" >
            <span class="left-label" style="font-size: 18px; font-weight: bold; ">Fund Classes</span>
            <div class="pull-right" style="padding-right:10px; display: inline-block; vertical-align:middle">
                    <label style="text-align: center; vertical-align:middle" class="btn btn-default pull-right" >   <i data-bind="visible: true" class="fa fa-plus-square"></i><input
                            type="checkbox"  class="hidden" /> Add Class</label>
                        </div>                
         </div>

<div *ngIf="FundClasses && FundClasses.FundDetailsViewModel">

    <table class="fundClassesTable table-striped" >

        <tr>
            <th class="tableItem bold">Fund Name</th>
            <th class="tableItem bold">Accounting Class Name</th>
            <th class="tableItem bold">Class ID</th>
            <th class="tableItem bold">Legal Fund Class</th>
            <th class="tableItem bold">Inception Date</th>
            <th class="tableItem bold">Invested Amount</th>
            <th class="tableItem bold">Vehicle Type</th>
            <th class="tableItem bold">Closure Status</th>
            <th class="tableItem bold">Is Side Pocket?</th>
            <th class="tableItem bold">Is Thematic?</th>
            <th class="tableItem bold">Cogency Class?</th>
            <th class="tableItem"></th>
        </tr>

        <ng-container *ngFor="let fundClass of FundClasses.FundDetailsViewModel" >
            <tr *ngFor="let f of fundClass['FundClassDetailsViewModel'] | keyvalue">
                <td class="tableItem">{{ f.value.FundName}}</td>
                <td class="tableItem">{{ f.value.Description}}</td>
                <td class="tableItem">{{f.value.Id}}</td>
                <td class="tableItem"> <!--{{ f.value.LegalFundClassId}} -->
                        <kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.LegalFundClassId" class="form-control  form-control-sm"
                        [data]= "fundClass.PrimaryLegalFundClasses" [filterable]="false"  textField="Description" [valuePrimitive]="true" valueField="Id"
                        ></kendo-dropdownlist>
                </td>
                <td class="tableItem"> <!-- {{f.value.InceptionDate}} -->
                    <kendo-datepicker  style="width:100%" [format]="'MMMM yyyy'"  [topView]="'decade'" [bottomView]="'year'"
                         [(ngModel)]="f.value.InceptionDate"
                        class="form-control  form-control-sm" >
                    </kendo-datepicker>
                </td>
                <td   *ngIf="EditMode" class="tableItem" style="width:100%"> <!--{{ f.value.InvestedAmount}} -->
                        <input kendoTextBox [(ngModel)]="f.value.InvestedAmount" style=""/>
                </td>
                <td  *ngIf="!EditMode" class="tableItem" style="width:100%"> 
                    {{ f.value.InvestedAmount}}
                </td>
                <td class="tableItem"> <!--{{ f.value.VehicleTypeId}}-->
                    <kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.VehicleTypeId" class="form-control  form-control-sm"
                     [data]= "FundClasses.VehicleTypes" [filterable]="false"  textField="Name" [valuePrimitive]="true" valueField="Id"
                    ></kendo-dropdownlist>
                </td>
                <td class="tableItem">  <!-- {{f.value.ClosureStatusId}}  -->
                        <kendo-dropdownlist style="width:100%" [(ngModel)]="f.value.ClosureStatusId" class="form-control  form-control-sm"
                        [data]= "FundClasses.ClosureStatuses" [filterable]="false"  textField="Name" [valuePrimitive]="true" valueField="Id"
                        ></kendo-dropdownlist>
                </td>

                <td class="tableItem"> <!-- {{f.value.IsSidePocket}} -->
                        <input type="checkbox"  value="{{f.value.IsSidePocket}}" id= "chk"  style="width: 13px; height: 13px;"  /> 
                        <label for="chk" >Yes</label>

                </td>
                <td class="tableItem"> <!--{{ f.value.IsThematic}} -->
                        <input type="checkbox"  value="{{f.value.IsThematic}}"  style="width: 13px; height: 13px;"  /> 
                        <label for="chk" >Yes</label>
                </td>
               <td class="tableItem">   <!--    {{f.value.CogencyClassId}} -->
                        <kendo-dropdownlist style="width:100%" [(ngModel)]= "f.value.CogencyClassId" class="form-control  form-control-sm"
                        [data]= "fundClass.CogencyClasses" [filterable]="false"  textField="Name" [valuePrimitive]="true" valueField="Id"
                        ></kendo-dropdownlist>
                </td>
                <td class="tableItem"> 
                        <button type="button"  [(ngModel)]="EditMode" class="btn btn-primary  btn mr-1 col-sm-4"
                        >Edit</button>
                       <button type="button"  class="btn btn-primary  col-sm-4"
                            >Save</button>
                  <!-- <span ><button type="button" class="btn btn-primary btn-view-all btn mr-1 col-sm-2"
                            >Edit</button>

                    </span>

                    <span><button type="button"  class="btn btn-primary btn-view-all col-sm-2"
                            >Save</button>
                    </span>   -->
                </td>
            </tr>
        </ng-container>
    </table> 
</div>
</div>

组件代码

import {Component, OnInit, Input} from '@angular/core';


@Component({
selector : 'mgr-fund-classes',
templateUrl : './fundClasses.component.html'
})


export class FundClassesComponent implements OnInit {

    //@Input() FundClasses;
    private _fundClasses : any;
    public fundClassKeys = [];

    _editModel: boolean;
    get EditMode(): boolean {
        return this._editModel;
    }

    @Input('EditMode')
    set EditMode(value: boolean) {
        this._editModel = value;
    }

    public get FundClasses(): any {
        return this._fundClasses;
    }
    @Input()
    public set FundClasses(value: any) {
        this._fundClasses = value;
    }

    ngOnInit() {
        this.init();
    }

    init() {
        // if(this.FundClasses) {
        // this.fundClassKeys = Object.keys(this.FundClasses.FundDetailsViewModel.FundClassDetailsViewModel);
       // }
    }
}

屏幕截图

在角度7

0 个答案: