Question

我是angular的新手，我在理解为什么无法使用组件输入参数作为键来访问JSON对象值时遇到问题。

在我的应用程序组件中，添加了三个组件：

 <div style="background-color: red; padding: 10px;">
    <div>{{counter}}</div>
    <button (click)="increment()">increment from parent</button>
    <app-child [(counter)]="counter"></app-child>
    <app-child [counter]="counter" (counterChange)="counter=$event"></app-child>
  </div>

组件“ app-example”将配置JSON文件作为配置导入，并具有@Input（）输入：string;

在“ app-example”组件内部，我试图使用config [this.input]

访问ngOnInit（）中的config。

当我console.log（config [this.input]）时，它打印出未定义的
当我console.log（this.input）时，它打印出输入字符串（例如“ example1”）
但是，例如，如果我使用console.log（config [“ example1”]），它将打印出相应的对象。

这可能是非常基本的东西，但是我无法弄清楚。

Answer 1

使用Angular输入的正确语法是：@Input() input: string（请注意，示例中缺少括号）。

这是可行的简单示例：

app.component.html

<app-foo bar="baz"></app-foo>

bar.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-foo',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.scss']
})
export class FooComponent implements OnInit {
  @Input() bar: string;

  constructor() {
    console.log('Shows undefined:', this.bar);
  }

  ngOnInit() {
    console.log('Shows baz:', this.bar);
  }
}

如果运行此命令，它将在控制台中显示baz。

您可以了解有关输入的更多信息：https://angular.io/api/core/Input。

使用组件输入参数访问JSON对象值

1 个答案: