在Angular中,插值属性包含点的名称是无法直接使用的,因为点被解释为对象属性分隔符。不过,我们可以通过使用方括号语法来访问包含点的属性。
以下是一个示例,展示了如何解决这个问题:
组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
template: `
{{ data['first.name'] }}
`,
})
export class ExampleComponent {
data = {
'first.name': 'John',
};
}
在上面的示例中,我们使用了方括号语法 data['first.name']
来访问包含点的属性。
这样就可以正确地显示属性的值。
请注意,方括号语法也适用于其他Angular指令,比如 ngFor
和 ngIf
:
{{ item }}
This is visible.
这样,你就可以正确地访问包含点的属性,并在Angular模板中使用它们了。