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

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

在 Angular 9 中,如何更新組件的數(shù)據(jù)字段以在 DOM 中顯示而不重新實(shí)例化它?

在 Angular 9 中,如何更新組件的數(shù)據(jù)字段以在 DOM 中顯示而不重新實(shí)例化它?

天涯盡頭無女友 2022-10-13 19:20:35
我對 Angular 9 還很陌生。我有一個(gè)程序,用戶輸入一個(gè)名稱 - 在提交時(shí) - 發(fā)送一個(gè) POST HTTP 請求并存儲該名稱。然后,我有一個(gè)不相關(guān)的子標(biāo)題組件,它列出了使用 ngOnInit() 的 GET HTTP 請求存儲的名稱。但是,我需要子標(biāo)題在每次輸入新列表時(shí)動(dòng)態(tài)更新該名稱列表,而不僅僅是在組件實(shí)例化時(shí)。我不確定如何進(jìn)行。我確信我可以簡單地添加一個(gè)按鈕來獲取和更新所述列表,但嘗試更動(dòng)態(tài)的東西。提前致謝!//SERVICE.TS...import { Injectable } from '@angular/core';import { HttpClient } from '@angular/common/http';import { NewList } from './new-list.model';import { map } from 'rxjs/operators';@Injectable({  providedIn: 'root'})export class ListService {  createdLists: NewList[] = [];  constructor(private http: HttpClient) { }  createList(postData) {    return this.http      .post(        'API_KEY',        postData      );  }  getLists() {    return this.http      .get<NewList>(        'API_KEY'      ).pipe(map(responseData => {            const responseArray: NewList[] = [];            for (const key in responseData) {              responseArray.push(responseData[key])            }            return responseArray;          })        );  }}// NEW-LIST-MENU.TS (USER ENTERS A NAME)...import { Component, OnInit } from '@angular/core';import { NgForm } from '@angular/forms';import { Router } from '@angular/router';import { ListService } from 'src/app/shared/list.service';import { NewList } from 'src/app/shared/new-list.model';import { UIService } from 'src/app/shared/ui.service';@Component({  selector: 'app-new-list-menu',  templateUrl: './new-list-menu.component.html',  styleUrls: ['./new-list-menu.component.css']})export class NewListMenuComponent implements OnInit {  constructor(private listService: ListService,              private uiService: UIService,              private router: Router) { }  ngOnInit(): void {  }  onSubmit(form: NgForm) {    const listName = form.value.listname;    const newListObj = new NewList(listName, []);        this.listService.createList(newListObj)      .subscribe(() => {        this.router.navigate(['']);      });    const lists = this.listService.updateLists(newListObj);            form.reset();  }
查看完整描述

3 回答

?
蕭十郎

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

您可以通過多種方式完成此操作,因?yàn)檫@些組件彼此不相關(guān),您可以引入狀態(tài)服務(wù)并使用可觀察對象。請參閱下面可能的解決方案


創(chuàng)建一個(gè)新的狀態(tài)服務(wù) ListStateService


 export class ListStateService {

     private listData = new BehaviorSubject<NewList >({} as NewList);       

     listData$ = this.listData .asObservable();

 }

將 ListStateService 注入 NewListMenuComponent


在 onSubmit 中,更新后,


 const lists = this.listService.updateLists(newListObj);

    this.listData .next(lists );

將 ListStateService 注入 SubHeaderComponent 在 ngOnInit() 中,訂閱 ListStateService.listData$,在這里您將獲得更改的值


查看完整回答
反對 回復(fù) 2022-10-13
?
梵蒂岡之花

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

在您的服務(wù)中,使用事件發(fā)射器(非常有用):


import { EventEmitter } from "@angular/core";


@Output() myEvent: EventEmitter<any> = new EventEmitter();

然后通過您的服務(wù)向您的子標(biāo)題組件發(fā)送新數(shù)據(jù),如下所示:


emitEvent (newData: Array<string>) {

    this.myEvent.emit({

        data: newData,

    });

}

訂閱子標(biāo)題組件中的新數(shù)據(jù)ngOnInit并使用它:


this.myService.myEvent.subscribe((newData: Array<string>) => {

    console.log(JSON.stringify(newData.data));

});

注意:如果在組件中不斷地重新訂閱,訂閱會導(dǎo)致內(nèi)存泄漏,所以您可以保存訂閱并unsubscribe()在ngOnDestroy回調(diào)中調(diào)用它。


查看完整回答
反對 回復(fù) 2022-10-13
?
溫溫醬

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

有點(diǎn)不清楚您要做什么,但是如果您嘗試將數(shù)據(jù)從父組件傳遞到子組件,則可以使用 Input 字段或 ViewChild

使用您的父母可能看起來像這樣的輸入字段:

<app-sub-header [names]="names"></app-sub-header>

然后在孩子中使用“輸入”字段。更新父級中的名稱應(yīng)實(shí)時(shí)更新子級中相同的命名變量。


查看完整回答
反對 回復(fù) 2022-10-13
  • 3 回答
  • 0 關(guān)注
  • 208 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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