猿问

当用户开始在 Angular 中输入时如何更改搜索图标

我的资产文件夹中有 2 个 SVG 图标,HTML 中有一个用户输入框。我希望第一个图标显示为默认图标,但是当用户开始在文本框中输入内容时,我希望显示第二个图标。我很难尝试实现这一点。


有相同的搜索图标,但第一个图标只是纯白色,第二个图标是青色。


默认图标 = 搜索放大镜图标。


当用户开始输入 = search-magnifying-glass-teal-icon 时更改此设置。


我不确定是否可以直接更改 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;

        }

      });

月关宝盒
浏览 93回答 1
1回答

慕村9548890

在 html 中,您更改图标元素以获取参数&nbsp;<div class="icon"><img [src]="icon"></div>然后在组件中创建图标变量icon="../../assets/images/icons/search-magnifying-glass-icon.svg"然后在你的代码中&nbsp;this.inputCtrl.valueChanges&nbsp; &nbsp; &nbsp; .pipe(takeUntil(this.death$))&nbsp; &nbsp; &nbsp; .subscribe((value: string) => {&nbsp; &nbsp; &nbsp; &nbsp; this._filterTags(value);&nbsp; &nbsp; &nbsp; &nbsp; this.updateQuery(value);&nbsp; &nbsp; &nbsp; &nbsp; if(value == ''){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.showColumn = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.icon="../../assets/images/icons/search-magnifying-glass-icon.svg"&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.showColumn = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.icon="../../assets/images/icons/search-magnifying-glass-teal-icon"&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });
随时随地看视频慕课网APP

相关分类

Html5
我要回答