Angular：模型注释的识别不通过 Angular 代码进行识别

Question

我正在开发一个 Angular 应用程序，其中有一个具有不同类型属性的模型对象。我在模型中做了注释，以便应用程序知道何时需要另一种类型的输入。不幸的是，应用程序无法识别它：

这是我的代码：

app.component.ts：

import { Component } from '@angular/core';
import { Model } from './model/model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: './app.component.css'
})
export class AppComponent {

  model = new Model();
}

app.component.html：

<app-register-module [model]="model" ></app-principal>

注册模块.component.ts：

@Component({
  selector: 'app-register-module',
  templateUrl: './register-module.component.html',
  styleUrls: ['./register-module.component.css']
})
export class RegisterModule
{

@Input() model!: { [key: string]: any };

getModelProperties(): Array<keyof Persistable> {
  if (this.model) {
    const propertyNames = Object.keys(this.model) as Array<keyof Persistable>;    
      
    return propertyNames;
  } else {
    return [];
  }
}

capitalizeFirstLetter(str: string): string {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

isIdProperty(property: string): boolean {
  return property.toLowerCase() === 'id';
}

onSubmit() {
  if (this.model) {
    for (const property of Object.keys(this.model)) {
      console.log(property + ':', this.model[property]);
    }
  } else {
    console.log('Model is null or undefined.');
  }
}    

isPriceProperty(model: any, property: string): boolean {      
  const category= Reflect.getMetadata('category', model, property);
  console.log('category: ' + category);
  if(category=== 'price'){
    console.log(property + " is price");
  }
  else{
    console.log(property + " is not price");
  }
  return category=== 'price';
}
}

注册模块.component.html：

<form (ngSubmit)="onSubmit()">
    <div *ngFor="let property of getModelProperties()" class="mb-3">
    <ng-container *ngIf="isPriceProperty(model, property)">
        <mat-slider
          [min]="0"
          [max]="100"
          [step]="0.01"
          [(ngModel)]="model[property]">
        </mat-slider>
        <span>{{ model[property] | number: '1.2-2' }}</span>
      </ng-container>
      <ng-container *ngIf="!isPriceProperty(model, property)">
        <input
          type="text"
          class="form-control"
          [id]="property"
          [name]="property"
          [placeholder]="'Insert' + capitalizeFirstLetter(property) + ':'"
          [(ngModel)]="model[property]">
      </ng-container>
</div>
<div class="row">
        <button type="submit">Record Data</button>     
</div>
</form>

模型.ts：

export class Model 
{
   text!: string;
   @Category('price')
   number!: number;
}

注释.ts：

export function Category(category: string) {
    return (target: any, propertyKey: string) => {
        Reflect.defineMetadata('category', category, target, propertyKey);
    };
 }

正在打印：

register-module.component.ts:45 category: undefined
register-module.component.ts:50 id is not price
register-module.component.ts:45 category: undefined
register-module.component.component.ts:50 number is not price

显然，该数字在 HTML 中不会显示为两位小数的可滚动浮动输入，因为 Angular 无法识别数字 作为价格。

Answer 1

您的

app.component.html

文件中的标签似乎有错误。您正在打开

<app-register-module>

标签，但您正在使用

</app-principal>

关闭它。开始和结束标签必须匹配。将此问题修复为：

<app-register-module [model]="model"></app-register-module>

另外，根据您的问题描述，我建议检查以下几点： 所描述的问题与模型中注释（或装饰器）

@Category('price')

的未识别有关。以下是排查和解决问题的一些步骤：

1. 依赖关系：

   • 确保您的项目中安装了

     reflect-metadata

     库。如果没有，请使用npm或yarn安装：

     npm install reflect-metadata
     

   • 在项目的主文件（通常为

     main.ts

     或

     polyfills.ts

     ）中，在顶部添加以下行：

     import 'reflect-metadata';
     

2. 检查装饰器：

   • 确保正确应用

     @Category

     装饰器。代码看起来是正确的，但检查一下总是好的。

3. 访问元数据：

   • 尝试访问元数据时，请确保操作正确。在您的代码中，您正在使用

     Reflect.getMetadata(...)

     。这似乎是正确的，但请确保您传递了正确的参数。

4. 编译：

   • 需要配置TypeScript将设计信息输出到反射。在您的

     tsconfig.json

     中，确保您有以下选项：

     {
       "compilerOptions": {
         "experimentalDecorators": true,
         "emitDecoratorMetadata": true
       }
     }
     

5. 运行时检查：

   • 有时问题可能不在代码中，而在 Angular 运行或初始化的方式中。确保控制台中没有其他可能导致此行为的错误。

6. 代码修订：

   • 检查组件和模板代码，确保不存在可能导致问题的印刷或逻辑错误。

如果执行这些步骤后问题仍然存在，那么在 StackBlitz 或 CodeSandbox 等平台上创建一个最小的可重现示例可能会有所帮助。这将使其他开发人员能够更轻松地帮助识别和解决问题。

希望这可以帮助解决您的问题！