Question

我在Angular 2 foobar组件中声明了一个名为Foobar的属性：

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

@Component({
  selector: 'app-foobar',
  templateUrl: './foobar.component.html',
  styleUrls: ['./foobar.component.css']
})
export class FoobarComponent implements OnInit {

  foobar= 'test';

  ngOnInit() {
  }
}

然后在foobar.component.html文件中输出这样的属性：

<div>
   <br>
   {{foobar}} 
</div>

并输出单词test，但是，一旦我添加了标识为foobar的元素：

<div>
   <br>
   {{foobar}}
   <br>
   <input type="text" #foobar>
</div>

我无法再从组件中获取值并输出[object HTMLInputElement]，因为它被输入字段ID遮蔽了。

如何在不更改组件属性名称和输入字段ID的情况下从组件中获取值？

Answer 1

你可以试试这个

<div>
    <br>
    {{ this['foobar'] }}
    <br>
    <input type="text" #foobar>
</div>

但未记录在案，可能会在以后的版本中中断

Answer 2

尝试使用双向数据绑定：

<div>
  <br />
  {{foobar}}
  <br />
  <input type="text" [(ngModel)]="foobar">
</div>`

要实现这一点，您需要在package.json中使用模块： @ angular / forms ，不要忘记将其导入您的app-module：

import {FormsModule} from "@angular/forms";

@NgModule({
   declarations: [ ... ],
   imports: [
      FormsModule,
      ...
   ]
   ...
})
export class AppModule{ ... }

Angular 2 Component属性阴影

2 个答案: