Angular中grid-ui组件无法绑定grid-columns属性的问题求助

错误场景 #

在Angular项目的app.Customer.html和app.CustomerComponent.ts文件中触发错误，提示信息：

Can't bind to 'grid-columns' since it isn't a known property of 'grid-ui'

错误代码为ngtsc(-998002)，定位在CustomerComponent的模板中（app.CustomerComponent.ts第3行第55列）。

相关代码示例 #

app.Customer.html代码 #

<form [formGroup]="CustomerModel.formCustomerGroup">
Customer Code :<input formControlName="CustomerCodeControl" 
[(ngModel)]="CustomerModel.CustomerCode" type=text/><br>
Customer Name :<input formControlName="CustomerNameControl" 
 [(ngModel)]="CustomerModel.CustomerName" type=text/><br>
Customer Amount :<input [(ngModel)]="CustomerModel.CustomerAmount" 
[ngModelOptions]="{standalone: true}"
type=text/><br>
<input [disabled]="!(CustomerModel.formCustomerGroup.valid)" (click)="Add()" type=button value="Add"/><br>
</form>
<div *ngIf="CustomerModel.formCustomerGroup.dirty"
            [hidden]="!(hasError('pattern','CustomerCodeControl'))" >Customer Code format is not proper</div><br>
<div *ngIf="CustomerModel.formCustomerGroup.dirty" 
            [hidden]="!(hasError('required','CustomerCodeControl'))" >Customer Code is required</div><br>
<div *ngIf="CustomerModel.formCustomerGroup.dirty"
            [hidden]="!(hasError('required','CustomerCodeControl'))" >Customer name is required</div><br>


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

app.CustomerComponent.ts代码 #

import { Component, Injector } from '@angular/core';
import {Customer} from "./app.model";
import {BaseLogger} from "../Utility/app.Logger"
@Component({
  templateUrl: './app.CustomerView.html', 
})
export class CustomerComponent {
  title = 'MyApp';
  CustomerModel : Customer = new Customer();
  CustomerModels :Array<Customer>=new Array<Customer>();
  Logobj !: BaseLogger;
  constructor(_injector : Injector){
    this.Logobj = _injector.get("1");
    this.Logobj.Log;
  }
  SelectCustomer(_selected:Customer){
     this.CustomerModel = _selected;
  }
  Add(){
      this.CustomerModels.push(this.CustomerModel);
      this.CustomerModel=new Customer(); //clear UI
  }
  hasError(typeofvalidator:string,
        controlname:string) : boolean{
          return this.CustomerModel
                .formCustomerGroup
                .controls[controlname]
                .hasError(typeofvalidator);
  }
}

官方排查提示 #

• 若grid-ui是Angular组件且拥有grid-columns输入属性，请确认它已加入当前模块。
• 若grid-ui是Web组件，请在该组件的@NgModule.schemas中添加CUSTOM_ELEMENTS_SCHEMA以屏蔽该提示。
• 若要允许任意属性，请在该组件的@NgModule.schemas中添加NO_ERRORS_SCHEMA。

具体解决方案 #

方案1：如果grid-ui是自定义Angular组件 #

1. 找到grid-ui对应的组件类（比如GridUiComponent），确保它被正确导出。
2. 在当前组件所属的模块（比如AppModule或CustomerModule）中，导入该组件并添加到declarations数组；如果是从其他模块引入的，要确保该模块被导入到当前模块的imports数组里。

示例模块代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CustomerComponent } from './app.CustomerComponent';
import { GridUiComponent } from './path/to/grid-ui.component'; // 导入grid-ui组件

@NgModule({
  declarations: [
    CustomerComponent,
    GridUiComponent // 声明组件
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [CustomerComponent]
})
export class AppModule { }

方案2：如果grid-ui是Web组件（第三方自定义元素） #

在当前组件所属的模块中，导入CUSTOM_ELEMENTS_SCHEMA并添加到schemas数组：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CustomerComponent } from './app.CustomerComponent';

@NgModule({
  declarations: [
    CustomerComponent
  ],
  imports: [
    BrowserModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // 添加该schema
  providers: [],
  bootstrap: [CustomerComponent]
})
export class AppModule { }

方案3：允许任意属性（不推荐用于生产环境） #

如果只是临时屏蔽错误，或者确认属性存在但Angular无法识别，可以添加NO_ERRORS_SCHEMA：

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CustomerComponent } from './app.CustomerComponent';

@NgModule({
  declarations: [
    CustomerComponent
  ],
  imports: [
    BrowserModule
  ],
  schemas: [NO_ERRORS_SCHEMA], // 添加该schema
  providers: [],
  bootstrap: [CustomerComponent]
})
export class AppModule { }

注意：NO_ERRORS_SCHEMA会屏蔽所有未知属性和元素的错误，可能隐藏其他潜在问题，生产环境建议优先使用前两种方案。

内容的提问来源于stack exchange，提问作者Vaishali Nimbalkar