Question

我有一个可观察的候选人名单，对于每个候选人，我想用儿童组件库展示他的照片。但ngOnChanges永远不会被解雇。这是父html：

<div [ngClass]="{'active':i+1===selectedCandidat}" class="tab-pane w3-animate-top" id="#candidate-{{i+1}}"
     *ngFor="let candidate of (application | async)?.candidateList; let i = index;">
  <div class="box box-widget widget-user-2">
    <!-- Add the bg color to the header using any of the bg-* classes -->
    <div class="widget-user-header bg-yellow">
      <div class="widget-user-image">
        <img class="img-bordered-sm" src="{{(candidate)?.dataList | datalist: 'PHOTO.IMAGE': 'image'}}"
             alt="User Avatar">
    <div class="box-footer no-padding">
      <ul class="nav nav-stacked">
        <li>
          <a>Nom
            <span class="pull-right badge bg-aqua">{{(candidate)?.dataList | datalist: "FIRST_NAME"}} </span>
          </a>
        </li>
        <li>
          <a>Prénom
            <span class="pull-right badge bg-green">{{(candidate)?.dataList | datalist: "LAST_NAME"}}</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <hr>
  <strong>
    <i class="fa fa-camera fa-lg margin-r-5"></i> Photos</strong>
  <div style="text-align: center">
    **<app-gallery [candidate]="candidate"></app-gallery>**
  </div>
</div>
<!-- /.tab-pane -->

gallery组件的ts文件是：

ngOnChanges(changes: SimpleChanges) {
  console.log('The candidate changed');
  const key = 'PHOTO.IMAGE';
  if (changes['candidate']) {
    console.log('The candidate changed');
    const value = this.candidate.dataList.find(pair => key === pair.field) ? this.candidate.dataList.find(pair => key === pair.field).value : null;
    this.images = [
      {
        small: 'data:image/jpeg;base64,' + value,
        medium: 'data:image/jpeg;base64,' + value,
        big: 'data:image/jpeg;base64,' + value
      },
    ];
  }
}

但是从不调用此函数，我没有在控制台中看到日志消息。你能帮我找一个解决方案吗？

我将代码从ngOnChanges移到了ngOnInit：但候选人总是未定义。

ngOnInit() {
  console.log('gallery images init');
  console.log(this.candidate);
  const key = 'PHOTO.IMAGE';
  // if (changes['candidate']) {
  console.log('The candidate changed');
  const value = this.candidate.dataList.find(pair => key === pair.field) ? this.candidate.dataList.find(pair => key === pair.field).value : null;
  this.images = [
    {
      small: 'data:image/jpeg;base64,' + value,
      medium: 'data:image/jpeg;base64,' + value,
      big: 'data:image/jpeg;base64,' + value
    },
  ];
}

以下是父组件的代码：

export class NavTabsComponent implements OnInit {
  selectedCandidat: number;
  subscription: Subscription;
  application: Observable<Application>;

  constructor(private consultService: ConsultService, private location: Location) {
    this.subscription = consultService.getApplicationSubject()
    .subscribe((item: Application) => {
      console.log('applicationSubject update');
      console.log(item);
      // Sort the activity list by the last update time
      if (item != null && item.workflow != null && item.workflow.activityList != null) {
        item.workflow.activityList.sort((leftSide, rightSide): number => {
          if (leftSide.lastUpdate < rightSide.lastUpdate) return 1;
          if (leftSide.lastUpdate > rightSide.lastUpdate) return -1;
          return 0;
        });
      }

      this.application = of(item);

      this.selectedCandidat = 1;
    });
  }

Answer 1

使用以下代码替换您的代码：

<div style="text-align: center">
    <app-gallery [candidate]="application.candidateList[i]"></app-gallery>
  </div>

<强>解释当candidateList [i]发生变化时，将触发ngOnChange。以前您没有改变您的candidateList数组对象。希望它会有所帮助

Answer 2

ngOnChanges永远不会解雇您使用async管道（let candidate of (application | async)）的原因，这会等到您的数据准备就绪，因此您总是会拥有{ {1}}输入就绪，但没有改变...所以我建议你在[candidate]中移动你的代码，它会正常工作。

在您的父构造函数

中尝试以下代码

ngOnInit

Angular 4/5输入更改未触发

2 个答案: