输入变量未从模板的 @Input 属性中获取值。角 5

Question

我正在用prime-ng实验尝试一些angular 5，我发现了一些困难（相对于angular 5），我用下一个模板制作了一个组件：

<p>Chemi-tabla works! Y ahora un mensage de nuestros patrocinadores: {{this.nombre}}</p>
<p-dataTable [value]="_postsArray" [loading]="loading"
   loadingIcon="fa-spinner" [rows]="10" [paginator]="true" 
   [multiSortMeta]="multiSortMeta" selectionMode="Single" [(selection)]="selectedUserInfo">
    <p-header>Cabecera de la Chemi Tabla.</p-header>
    <p-footer>Lo de abajo de la chemi tabla, vamos lo que va arrastrando.</p-footer>
    <p-column selectionMode="single"></p-column>
    <p-column field="userId" header="Usuario ID" sortable="true" [filter]="true" filterPlaceholder="Search"></p-column>
    <p-column field="id" header="IDE" sortable="true" [filter]="true" [filter]="true" filterPlaceholder="Search"></p-column>
    <p-column field="title" header="Título" sortable="true" [filter]="true" filterMatchMode="contains"></p-column>
    <p-column field="body" header="Body" sortable="true" [filter]="true" filterMatchMode="contains"></p-column>
</p-dataTable>

但是这条线：

<p>Chemi-tabla works! And now a message: {{this.nombre}}</p>

没有在 {{this.nombre}} 中打印 anithing，如果我调试组件中的代码，它的值是未定义的。

我的索引 html 是下一个：

<chemi-tabla [nombre]="Hello World">
Loading chemi's table  </chemi-tabla>

component.ts 文件是下一个：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import {UserService} from './shared/user/user.service';
import {IPosts} from './shared/interfaces';
import {DataTableModule,SharedModule} from 'primeng/primeng';
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'chemi-tabla',
  templateUrl: './chemi-tabla.component.html',
  providers: [UserService],
  styleUrls: ['./chemi-tabla.component.css']
})

export class ChemiTablaComponent implements OnInit {
  _postsArray: IPosts[];
  msgs : CustomMessage[];
  selectedUserInfo : IPosts;
  @Input() nombre: string;
  constructor(private apiSerivce: UserService) {
    console.log("Constructor chemi tabla component.");

  }
  getPosts(): void {
    this.apiSerivce.getPosts()
    .subscribe(
      resultArray => this._postsArray = resultArray,
      error => console.log('Error :: ' + error)
    )
  }
  ngOnInit(): void {
    console.log(this.nombre);
    this.getPosts();
  }
}
class CustomMessage{
  severity:string;
  summary:string;
  detail:string;
  constructor(private severity_a: string, private summary_a: string, detail_a:string) {
    this.severity = severity_a;
    this.summary = summary_a;
    this.detail = detail_a;
  }
}

最后这是我正在使用的 module.ts：

import { HttpModule } from '@angular/http';//para promesas subscribe y demás
import { BrowserModule } from '@angular/platform-browser';//necesariko para pintar en pantalla
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';//necesario para redirecciones*1
import {UserService} from './shared/user/user.service';//servicio que me trae datos
import {IPosts} from './shared/interfaces';//tipos de datos
import {MessageService} from 'primeng/components/common/messageservice';//no se usa
import {DataTableModule,SharedModule} from 'primeng/primeng';//necesaroi para la tabla
import { ChemiTablaComponent } from './chemi-tabla.component';//mi componente

export const ROUTES: Routes = [
  { path: '', component: ChemiTablaComponent }//*1 podríamos decirle a un modulo que en tal direccion vaya a tal componente.... 
];
@NgModule({
  declarations: [ ChemiTablaComponent ],
  imports: [
    BrowserModule,
    CommonModule,
    DataTableModule,
    SharedModule,
    RouterModule.forChild(ROUTES),
    HttpModule
  ],
  providers: [ UserService ],
  bootstrap: [ ChemiTablaComponent ]
})
export class ChemisModule {
 public nombre : string;
 }

一切都在编译，p-datatable 工作正常，但我无法让 {{nombre}} 变量出现我遗漏了一些东西，我敢打赌这是一个非常愚蠢的问题，但我看不到它是什么是。

Answer 1

您的代码存在三处错误。

1. this您无法从模板中访问变量。在你的标记中，你应该只写{{nombre}}
2. 你不需要public nombre : string;在你的ChemisModule
3. 另外，如果你想通过 props 传递一个对象，你应该按如下方式操作<chemi-tabla [nombre]="'Hello World'">，或者<chemi-tabla nombre="Hello World">如果你使用方括号[]，你必须在引号之间放置一个对象。

编辑

另外，我刚刚意识到您正在尝试将属性传递给引导组件。检查这个问题

正如链接中所述，您无法将 an 传递Input给根组件。您可能也不需要这样做。您可以在根组件中定义它。