亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Angular @Input() 不更新子級中的 UI

Angular @Input() 不更新子級中的 UI

慕容森 2023-10-20 10:23:13
我已經實現了一個子組件來根據通過 @Input() 提供的列表來呈現表格。數據是通過 http 加載的,但是除非我在屏幕上揮動鼠標,否則 UI(子組件)不會更新。我見過有人發布關于在我的孩子中實現 ngOnChanges() 的帖子,但我認為 Angular 應該默認這樣做?我錯過了什么嗎?為什么 UI 不會隨之更新?子代碼看起來像這樣:子組件.ts@Component({  selector: 'child',  templateUrl: './child.component.html',  styleUrls: ['./child.component.scss'],})export class ChildComponent implements {  @Input() data: any[] = [];  constructor() {}}子組件.html<table>  <tr *ngFor="let item of data"><td>{{ item }}</td></tr></table>使用該組件的父代碼如下所示:父組件.ts@Component({  selector: 'parent',  templateUrl: './parent.component.html',  styleUrls: ['./parent.component.scss'],})export class ParentComponent implements OnInit {  data: string[] = [];  constructor(private endpointService: EndpointService) {}  ngOnInit() {    // response is a string array like: ['hello', 'world']    this.endpointService.loadData().subscribe((response) => {      this.data = response;    });  }}父組件.html<child [data]="data"></child>=============================編輯==================== =============我驗證了它僅在訂閱回調內部更新時才加載失?。ㄈ绻以O置靜態數組,它加載得很好)。所以看起來我可以通過在父組件中運行changeDetectorRef.detectChanges()來解決這個問題,但這感覺很黑客,就像我不應該這樣做一樣。這是解決這個問題的好方法嗎?或者這是否表明我的實現有問題?父組件.ts@Component({  selector: 'parent',  templateUrl: './parent.component.html',  styleUrls: ['./parent.component.scss'],})export class ParentComponent implements OnInit {  data: string[] = [];  constructor(private endpointService: EndpointService,              private changeDetectorRef: ChangeDetectorRef) {}  ngOnInit() {    // response is a string array like: ['hello', 'world']    this.endpointService.loadData().subscribe((response) => {      this.data = response;      this.changeDetectorRef.detectChanges();    });  }}
查看完整描述

4 回答

?
一只名叫tom的貓

TA貢獻1906條經驗 獲得超3個贊

您還可以嘗試通過強制值引用更新來強制更改檢測,例如通過擴展運算符:

this.endpointService.loadData().subscribe((response) => {
  this.data = [...response];
});


查看完整回答
反對 回復 2023-10-20
?
回首憶惘然

TA貢獻1847條經驗 獲得超11個贊

我已經解決了這個問題,更新了子輸入傳遞的屬性,而不是重新分配它。我認為 Angular 將輸入作為副本傳遞。所以,在訂閱正文中你應該使用

resultOfSubscribe.forEach((v) => varPassedByInput.push(v));



查看完整回答
反對 回復 2023-10-20
?
隔江千里

TA貢獻1906條經驗 獲得超10個贊

我用靜態字符串數組替換了該服務,效果很好。我認為可觀察訂閱有問題。


子組件.ts


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


@Component({

  selector: 'child',

  templateUrl: './child.component.html',

  styleUrls: ['./child.component.css']

})

export class ChildComponent implements OnInit {

@Input() data: any[] = [];

  constructor() { }


  ngOnInit() {

  }


}

父組件.ts


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


@Component({

  selector: 'parent',

  templateUrl: './parent.component.html',

  styleUrls: ['./parent.component.css'],

})

export class ParentComponent implements OnInit {

  data: string[] = [];


  constructor() {}


  ngOnInit() {

    

      this.data = ['hello', 'world','aaa','ddd'];

    

  }

}


查看完整回答
反對 回復 2023-10-20
?
波斯汪

TA貢獻1811條經驗 獲得超4個贊

模板表達式中似乎存在一些其他錯誤,導致整個模板失敗。這是我創建的 stackblitz,一切正常:https://stackblitz.com/edit/angular-ivy-w2ptbb ?file=src%2Fapp%2Fhello.component.ts

您在控制臺中可能有一些錯誤嗎?


查看完整回答
反對 回復 2023-10-20
  • 4 回答
  • 0 關注
  • 188 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號