Question

我正在尝试使用prime-ng实验的一些角度5并且我发现了一些困难（相对于角度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;
  }
}

最后这是我正在使用的模块。

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

您的代码有三个问题。

您无法使用模板中的this访问变量。在您的标记中，您应该只编写{{nombre}}
您的public nombre : string;

ChemisModule

此外，如果您想通过道具传递对象，则应按照<chemi-tabla [nombre]="'Hello World'">或<chemi-tabla nombre="Hello World">进行操作。如果您使用括号[]，则必须在引号之间放置一个对象

修改

此外，我刚刚意识到您正在尝试将属性传递给自举组件。请检查此question

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

Answer 2

我的朋友＆＃34; Bunyamin Coskuner＆＃34;在我之前回答问题是我的组件被引导了。他上面链接的问题给出了解决方案我在component.ts文件中使用了这个构造函数：

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

....

constructor(private apiSerivce: UserService, private elementRef:ElementRef) {
    console.log("Constructor chemi tabla component.");    
    let nombreAttribute = this.elementRef.nativeElement.getAttribute('nombre');
    this.nombre = nombreAttribute;
    console.log(this.nombre);
  }

现在它正在运作。我在我的问题中发布的代码中解释了我必须做的所需更改。

我必须使用ElementRef模块（来自@ angular / core）来获取属性＆＃39; nombre的值，如下所示： this.elementRef.nativeElement.getAttribute（＆＃39; nombre＆＃39;）; 来自自我引用我们传递给构造函数＆＃34;构造函数（private apiSerivce：UserService， private elementRef：ElementRef ）＆＃34;这样我就可以正确地获得属性值。

由于我已经明白这是因为它是引导模块，所以仍需要了解更多信息，但这是我今天所需要的解决方案。

因此，在我身上投票给Bunyamin Coskuner，他是摇滚的人

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

2 个答案: