1

客户模型.ts

   export class Customer{
        CustomerCode:string="";
        CustomerName:string="";
        CustomerAmount:number=0;
         
    }


    **customer.component.ts**

 import { Component, InjectionToken, Injector } from '@angular/core'
    import { Customer } from './Customer.model'
    import { BaseLogger } from '../Utility/CustomerApp.logger'
    
    @Component({
        selector: 'cust-app',
        templateUrl: './customer.view.html',
        styleUrls: ['./customer.view.css']
    })
    export class CustomerComponent {
        customerModel:Customer = new Customer();
        customerModels:Array<Customer> = new Array<Customer>();
    
        loggerObj: BaseLogger = null;
        constructor(_logger:BaseLogger){
         
            this.loggerObj=_logger;
            this.loggerObj.Log();
        }
        // i got error in SeleCustomer()
        SelectCustomer(_selected:Customer){
            this.customerModel = _selected;
          }
    }


    **customer.view.html**

     // Note: [grid-columns] colName got problem
    
      <grid-ui [grid-columns]="[{'colName':'CustomerCode'},{'colName':'CustomerName'}, 
         {'colName':'CustomerAmount'}]" 
        [grid-data]="customerModels"
        (grid-selected)="SelectCustomer($event)"
      ></grid-ui>


    **Grid.component.ts**

     import {Component,
            Input,
            Output,
            EventEmitter} from "@angular/core"
        
        @Component({
            selector: "grid-ui",
            templateUrl : "./Grid.view.html"
        })
        export class GridComponent{
            // for the column names
            gridColumns: Array<Object> = new Array<Object>();
            // grid data 
            gridData: Array<Object> = new Array<Object>();
             // Note: gridColumn store in array object
            @Input("grid-columns")
            set setGridColumns(_gridColumns:Array<Object>){
               this.gridColumns = _gridColumns;     
            }
            @Input("grid-data")
            set setGridData(_gridData:Array<Object>){
                this.gridData = _gridData;     
             }
             
             @Output("grid-selected")
             eventemitter: EventEmitter<Object> = 
             new EventEmitter<Object>();
        
             SelectGrid(_selected:Object){
                 this.eventemitter.emit(_selected);
             }
             
        }


    **Grid.view.html**

   

     <table>   
            <tr>
                   <td *ngFor="let col of gridColumns">
                       {{col.colName}}
                   </td>
            </tr>
            <tr *ngFor="let colObj of gridData">
                <td *ngFor="let col of gridColumns">
                    {{colObj[col.colName]}} // show Error Property 'colName' does not exist on type 'Object'
                </td>
                <td>
                    <a (click)="SelectGrid(colObj)" routerLink="'/Customer/Add'">select</a>
                </td>
            </tr>
           </table>



     **package.json**


  

      {
          "name": "angular11project",
          "version": "0.0.0",
          "scripts": {
            "ng": "ng",
            "start": "ng serve",
            "build": "ng build",
            "test": "ng test",
            "lint": "ng lint",
            "e2e": "ng e2e"
          },
          "private": true,
          "dependencies": {
            "@angular/animations": "~11.0.4",
            "@angular/common": "~11.0.4",
            "@angular/compiler": "~11.0.4",
            "@angular/core": "~11.0.4",
            "@angular/forms": "~11.0.4",
            "@angular/platform-browser": "~11.0.4",
            "@angular/platform-browser-dynamic": "~11.0.4",
            "@angular/router": "~11.0.4",
            "rxjs": "~6.6.0",
            "tslib": "^2.0.0",
            "zone.js": "~0.10.2"
          },
          "devDependencies": {
            "@angular-devkit/build-angular": "~0.1100.4",
            "@angular/cli": "~11.0.4",
            "@angular/compiler-cli": "~11.0.4",
            "@types/jasmine": "~3.6.0",
            "@types/node": "^12.11.1",
            "codelyzer": "^6.0.0",
            "jasmine-core": "~3.6.0",
            "jasmine-spec-reporter": "~5.0.0",
            "karma": "~5.1.0",
            "karma-chrome-launcher": "~3.1.0",
            "karma-coverage": "~2.0.3",
            "karma-jasmine": "~4.0.0",
            "karma-jasmine-html-reporter": "^1.5.0",
            "protractor": "~7.0.0",
            "ts-node": "~8.3.0",
            "tslint": "~6.1.0",
            "typescript": "~4.0.2"
          }
        }

  

OutPut :


Error:

“对象”类型的参数不能分配给“客户”类型的参数。“对象”类型可分配给极少数其他类型。您的意思是改用“任何”类型吗？类型“对象”缺少“客户”类型的以下属性：客户代码、客户名称、客户数量、表单客户组

 (grid-selected)="SelectCustomer($event)"
                                   ~~~~~~

src/app/customer/customer.component.ts templateUrl: './customer.view.html', ~~~~~~~~~~~~~~~~~~~~~~ 模板出错组件 CustomerComponent。src/app/Utility/Grid.view.html

  • 错误 TS2339：“对象”类型上不存在属性“colName”。

             {{col.colName}}
               ~~~~~~~

src/app/Utility/Grid.component.ts templateUrl : "./Grid.view.html" ~~~~~~~~~~~~~~~~~~ 组件GridComponent的模板出错。src/app/Utility/Grid.view.html:9:14 - 错误 TS7053：元素隐式具有“任何”类型，因为“任何”类型的表达式不能用于索引类型“对象”。

         {{colObj[col.colName]}}
           ~~~~~~~~~~~~~~~~~~~

src/app/Utility/Grid.component.ts templateUrl : "./Grid.view.html" ~~~~~~~~~~~~~~~~~~ 组件GridComponent的模板出错。src/app/Utility/Grid.view.html:9:25 - 错误 TS2339：“对象”类型上不存在属性“colName”。

        {{colObj[col.colName]}}
                      ~~~~~~~

src/app/Utility/Grid.component.ts templateUrl : "./Grid.view.html" ~~~~~~~~~~~~~~~~~~ 组件GridComponent的模板出错。

4

1 回答 1

0

我通过转换<Object>为<any>：

export class GridComponent {
    // for the column names
    gridColumns: Array<any> = new Array<any>();
    // grid data 
    gridData: Array<any> = new Array<any>();
于 2021-09-12T04:12:47.613 回答