当前位置：文江博客话题详情

如何在角组件中声明对象

发布于 2025-02-13 23:51:11 字数 970 浏览 3 评论 0 原文

我会在Angular组件中对对象声明有问题，

import { Component } from '@angular/core';

@Component({
  selector: 'app-clases',
  templateUrl: './clases.component.html'

})
export class ClasesComponent
{

  alerta:string="alert-danger";

  constructor() {  }

  propiedades:Object = {
    danger: false
  }

}

我是使用Angular的新手，当我尝试编译此代码时，

我会收到一个错误***汇编的问题：

Error: src/app/components/clases/clases.component.html:9:76 - error TS2339: Property 'danger' does not exist on type 'Object'.

9 <h3 [ngClass]=" {'text-danger':propiedades.danger,'text-info':!propiedades.danger  }">
                                                                             ~~~~~~

  src/app/components/clases/clases.component.ts:5:16
    5   templateUrl: './clases.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ClasesComponent.

似乎班级中的危险性尚不存在，但是它在那里，所以给予该错误

有帮助吗？

原文

I am newbie using Angular and I have an issue with object declaration in angular component

import { Component } from '@angular/core';

@Component({
  selector: 'app-clases',
  templateUrl: './clases.component.html'

})
export class ClasesComponent
{

  alerta:string="alert-danger";

  constructor() {  }

  propiedades:Object = {
    danger: false
  }

}

when I try to compile this code I get an error

***Compiled with problems:

Error: src/app/components/clases/clases.component.html:9:76 - error TS2339: Property 'danger' does not exist on type 'Object'.

9 <h3 [ngClass]=" {'text-danger':propiedades.danger,'text-info':!propiedades.danger  }">
                                                                             ~~~~~~

  src/app/components/clases/clases.component.ts:5:16
    5   templateUrl: './clases.component.html'
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ClasesComponent.

It seems that danger propoerty in the class doesnt exist but it is there so give that error

Any help ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

春夜浅 2025-02-20 23:51:11

我认为您只需要添加变量的类型即可成为这样。

import { Component } from '@angular/core';

@Component({
  selector: 'app-clases',
  templateUrl: './clases.component.html'
})
export class ClasesComponent {
  alerta = 'alert-danger';
 
  propiedades: {danger: boolean} = {
    danger: false
  };

  constructor() {}
}

I think you just need to add the type of variable propiedades to become like this.

import { Component } from '@angular/core';

@Component({
  selector: 'app-clases',
  templateUrl: './clases.component.html'
})
export class ClasesComponent {
  alerta = 'alert-danger';
 
  propiedades: {danger: boolean} = {
    danger: false
  };

  constructor() {}
}

回复收藏 0 原文

浮萍、无处依 2025-02-20 23:51:11

Typescript具有足够的信息来单独查找对象类型，因此您可以做到：

import { Component } from '@angular/core';

@Component({
  selector: 'app-clases',
  templateUrl: './clases.component.html'
})
export class ClasesComponent {
  alerta = 'alert-danger';
 
  propiedades = {
    danger: false
  };

  constructor() {}
}

如果将其明确键入为 object ，并评估此模板行：

<h3 [ngClass]=" {'text-danger':propiedades.danger,'text-info':!propiedades.danger }">

Angular/tyspercript编译器将期望类型确实没有危险属性。

Typescript has more than sufficient information to figure out the object type by itself, so you can just do:

import { Component } from '@angular/core';

@Component({
  selector: 'app-clases',
  templateUrl: './clases.component.html'
})
export class ClasesComponent {
  alerta = 'alert-danger';
 
  propiedades = {
    danger: false
  };

  constructor() {}
}

If you explicitly type it as Object, and evaluate this template line:

<h3 [ngClass]=" {'text-danger':propiedades.danger,'text-info':!propiedades.danger }">

The Angular/TypeScript compiler will expect a value of type Object, which indeed has no danger property.

回复收藏 0 原文

渔村楼浪 2025-02-20 23:51:11

有两种使用接口在打字稿中声明对象的方法。

第一 - 当我们知道确切的键时，我们必须使用一个接口，例如：

import { Component } from '@angular/core';

interface Propiedades {
    danger: Boolean;    
}

@Component({
  selector: 'app-clases',
  templateUrl: './clases.component.html'

})
export class ClasesComponent
{

  alerta:string="alert-danger";

  constructor() {  }

  propiedades: Propiedades = {
    danger: false
  }

}

第二 - 当我们不知道确切的键时，我们必须使用一个接口：

import { Component } from '@angular/core';

interface Propiedades {
    [key: string]: Boolean;    
}

@Component({
  selector: 'app-clases',
  templateUrl: './clases.component.html'

})
export class ClasesComponent
{

  alerta:string="alert-danger";

  constructor() {  }

  propiedades: Propiedades = {
    danger: false
  }

}

There are 2 ways to declare Objects in TypeScript using the interface.

1st - When we know the exact keys then we have to use an interface like:

import { Component } from '@angular/core';

interface Propiedades {
    danger: Boolean;    
}

@Component({
  selector: 'app-clases',
  templateUrl: './clases.component.html'

})
export class ClasesComponent
{

  alerta:string="alert-danger";

  constructor() {  }

  propiedades: Propiedades = {
    danger: false
  }

}

2nd - When we don't know exact keys then we have to use an interface like:

import { Component } from '@angular/core';

interface Propiedades {
    [key: string]: Boolean;    
}

@Component({
  selector: 'app-clases',
  templateUrl: './clases.component.html'

})
export class ClasesComponent
{

  alerta:string="alert-danger";

  constructor() {  }

  propiedades: Propiedades = {
    danger: false
  }

}

回复收藏 0 原文

~没有更多了~