Question

Angular的新手。我无法找到未将userName变量的值分配给user.myName的原因。想法？

address-card.component.ts

        export class AddressCardComponent implements OnInit {

  user: any;
  @Input('name') userName: string;
  @Input('jobTitle') myTitle: string;

  constructor() {
    this.user = {
      myName: this.userName,
      title: this.myTitle,
      address: '123 Main St., Somewhere, USA',
      phone: [
        '321-555-5550',
        '321-555-8319',
        '321-555-5088'
      ]    
    }
   }

address-card.component.html

<div>
<h1>***{{user.myName}}XXX</h1>
<h3>{{user.title}}</h3>
<p>{{user.address}}</p>
<div>
  <p>Phone</p>
  <p *ngFor="let phoneNumber of user.phone">{{phoneNumber}}</p>
</div>
<p>{{userName}}</p>
</div>

app.component.html

<app-address-card name="John Doe" jobTitle="Manager"></app-address-card>

h1标签的输出仅为*** XXX

Answer 1

Constructor不是使用@Input值的正确位置！

角组件具有生命周期，而constructor不是生命周期方法。可能是在执行constructor时，未设置@input的值。

因此实现OnInit并在ngOnInit()中设置值

ngOnInit() {
    this.user = {
      myName: this.userName,
      title: this.myTitle,
      address: '123 Main St., Somewhere, USA',
      phone: [
        '321-555-5550',
        '321-555-8319',
        '321-555-5088'
      ]    
    }
   }

您还可以使用OnChanges来查看该值发生了什么变化并加以捕捉。

一个可行的成员不会被@Input类变量填充

1 个答案: