在 In Project 客户组件和 Grid 组件中执行输入和输出

如何解决在 In Project 客户组件和 Grid 组件中执行输入和输出

Customer.model.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:

“Object”类型的参数不能分配给“Customer”类型的参数。 “对象”类型可分配给很少的其他类型。您是想改用“any”类型吗？ “对象”类型缺少“客户”类型中的以下属性：CustomerCode、CustomerName、CustomerAmount、formCustomerGroup

 (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：元素隐式具有“any”类型，因为“any”类型的表达式不能用于索引“Object”类型。

         {{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的模板出错。