Question

我有一个@input装饰器，用于从模型中获取值。但是，当我console.log结果不明确。这是我的代码

型号

export interface ExistingSaving {
  value: number;
  sourceId: any;
  fund: string;
}

Child.ts

@Input() existingSavings: ExistingSaving[];
console.log(this.existingSavings) // values don't pull through here

Child.html

<div class="saving-details">
    <div class="details">
      <label class="inline-element" for="name">Existing saving value</label>
      <input class="inline-element" id="name" type="text" value="TODO" name="name" readonly>
    </div>
    <div class="details">
      <label class="inline-element" for="name">Source</label>
      <p-dropdown class="inline-element" [options]="sources"   id="src" placeholder="Please select"></p-dropdown>
    </div>
    <div class="details">
      <label class="inline-element" for="name">Fund</label>
      <input class="inline-element" id="name" type="text" value="" name="name">
    </div>
</div>

Parent.ts //此处设置值

this.existingSavings.....
console.log(this.existingSavings) // values show correctly here

Parent.html

<div>
.....
    <div *ngIf="existingSavings">
    <app-child></app-child>
    </div>
.....
</div>

Answer 1

父HTML出现问题使用下面的代码片段更新代码

<app-child [existingSavings] = "existingSavings"></app-child>

在Child.ts中

通过ngOnInit()或除constructor()以外的任何方法访问它

Answer 2

您必须将属性传递给孩子：

<div *ngIf="existingSavings">
    <app-child [existingSavings]=existingSavings></app-child>
</div>

Answer 3

完成工作示例，您可以在此StackBlitz Link

中找到

尽管，答案已被接受，并且有可行的解决方案，但我想在为角度添加@input()绑定以提高性能时添加一些重要的观点。首先在子组件中，我们必须使用onPush ChangeDetectionStrategy。

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

@Component({
    selector: 'app-child',
    templateUrl: './child.component.html',
    styleUrls: ['./child.component.css'],
    changeDetection: ChangeDetectionStrategy.OnPush
})

因此，onPush strategy 不会每次都触发区域更改检测。仅当@input()属性更改时才会触发。在这里，请注意onPush策略通过引用检查输入属性的更改，因此仅从父级向属性分配值不会触发任何更改检测事件。为此，您必须reAssign reference of value like this... using Object.assign({},{})

 this.existingSavings = Object.assign({},this.existingSavings);

如果浏览器不支持Object.assign，则可以使用简单的解构。

this.existingSavings = {...this.existingSavings};

这个小技巧将应用程序的性能几乎提高了两倍，而没有使用onPush策略。

现在，是您遇到的问题。.`您的父应用程序组件是...

  existingSavings: ExistingSaving ={};

  eventClick(){
     // this three lines just assign value directly so, no change detection fires.

     this.existingSavings.fund = 'PF';
     this.existingSavings.sourceId='Govt';
     this.existingSavings.value = 10000;

     // In order to fire change Detection we need to re-Assign reference of property usign Object.assign()

     this.existingSavings = Object.assign({},this.existingSavings);
  }

您的父应用html是...

  <p>
       <app-child  [existingSavings]="existingSavings"></app-child>
  </p>

  <button (click)="eventClick()">sendData</button>

您的子Component.ts是...

   @Input() existingSavings;

   ngOnChanges(change: SimpleChanges){
      console.log(change['existingSavings'])
   }

您的ChildComponent的HTML ...

  <p>
    child works! 
  </p>

  {{existingSavings |json}}

输入修饰符值未通过-未定义的值

3 个答案: