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

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

當(dāng)用戶開始在 Angular 中輸入時如何更改搜索圖標

當(dāng)用戶開始在 Angular 中輸入時如何更改搜索圖標

月關(guān)寶盒 2023-12-04 17:18:26
我的資產(chǎn)文件夾中有 2 個 SVG 圖標,HTML 中有一個用戶輸入框。我希望第一個圖標顯示為默認圖標,但是當(dāng)用戶開始在文本框中輸入內(nèi)容時,我希望顯示第二個圖標。我很難嘗試實現(xiàn)這一點。有相同的搜索圖標,但第一個圖標只是純白色,第二個圖標是青色。默認圖標 = 搜索放大鏡圖標。當(dāng)用戶開始輸入 = search-magnifying-glass-teal-icon 時更改此設(shè)置。我不確定是否可以直接更改 SVG 圖標的描邊顏色,而不是在資源文件夾中放置兩個圖標,但這是目前的代碼。超文本標記語言        <mat-form-field appearance="fill" style="width: 380px;" >           <input matInput [formControl]="inputCtrl" [(ngModel)]="searchText" (ngModelChange)="searchTextChanged($event)"            placeholder="Search" class="input">           <div class="icon"><img src="../../assets//images/icons/search-magnifying-glass-icon.svg"></div>        </mat-form-field>  一些 TS  ngOnInit(): void {    this._filterTags();    this.inputCtrl.valueChanges      .pipe(takeUntil(this.death$))      .subscribe((value: string) => {        this._filterTags(value);        this.updateQuery(value);        if(value == ''){          this.showColumn = false;        }else{          this.showColumn = true;        }      });
查看完整描述

1 回答

?
慕村9548890

TA貢獻1884條經(jīng)驗 獲得超4個贊

在 html 中,您更改圖標元素以獲取參數(shù)


 <div class="icon"><img [src]="icon"></div>

然后在組件中創(chuàng)建圖標變量


icon="../../assets/images/icons/search-magnifying-glass-icon.svg"

然后在你的代碼中


 this.inputCtrl.valueChanges

      .pipe(takeUntil(this.death$))

      .subscribe((value: string) => {

        this._filterTags(value);

        this.updateQuery(value);

        if(value == ''){

          this.showColumn = false;

          this.icon="../../assets/images/icons/search-magnifying-glass-icon.svg"

        }else{

          this.showColumn = true;

          this.icon="../../assets/images/icons/search-magnifying-glass-teal-icon"

        }

      });



查看完整回答
反對 回復(fù) 2023-12-04
  • 1 回答
  • 0 關(guān)注
  • 168 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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