第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

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

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

慕容森 2023-10-20 10:23:13
我已經(jīng)實(shí)現(xiàn)了一個(gè)子組件來(lái)根據(jù)通過(guò) @Input() 提供的列表來(lái)呈現(xiàn)表格。數(shù)據(jù)是通過(guò) http 加載的,但是除非我在屏幕上揮動(dòng)鼠標(biāo),否則 UI(子組件)不會(huì)更新。我見(jiàn)過(guò)有人發(fā)布關(guān)于在我的孩子中實(shí)現(xiàn) ngOnChanges() 的帖子,但我認(rèn)為 Angular 應(yīng)該默認(rèn)這樣做?我錯(cuò)過(guò)了什么嗎?為什么 UI 不會(huì)隨之更新?子代碼看起來(lái)像這樣:子組件.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>=============================編輯==================== =============我驗(yàn)證了它僅在訂閱回調(diào)內(nèi)部更新時(shí)才加載失?。ㄈ绻以O(shè)置靜態(tài)數(shù)組,它加載得很好)。所以看起來(lái)我可以通過(guò)在父組件中運(yùn)行changeDetectorRef.detectChanges()來(lái)解決這個(gè)問(wèn)題,但這感覺(jué)很黑客,就像我不應(yīng)該這樣做一樣。這是解決這個(gè)問(wèn)題的好方法嗎?或者這是否表明我的實(shí)現(xiàn)有問(wèn)題?父組件.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貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超3個(gè)贊

您還可以嘗試通過(guò)強(qiáng)制值引用更新來(lái)強(qiáng)制更改檢測(cè),例如通過(guò)擴(kuò)展運(yùn)算符:

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


查看完整回答
反對(duì) 回復(fù) 2023-10-20
?
回首憶惘然

TA貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超11個(gè)贊

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

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



查看完整回答
反對(duì) 回復(fù) 2023-10-20
?
隔江千里

TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超10個(gè)贊

我用靜態(tài)字符串?dāng)?shù)組替換了該服務(wù),效果很好。我認(rèn)為可觀察訂閱有問(wèn)題。


子組件.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'];

    

  }

}


查看完整回答
反對(duì) 回復(fù) 2023-10-20
?
波斯汪

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超4個(gè)贊

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

您在控制臺(tái)中可能有一些錯(cuò)誤嗎?


查看完整回答
反對(duì) 回復(fù) 2023-10-20
  • 4 回答
  • 0 關(guān)注
  • 204 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)