如何默认选择第一项，然后在角度 6 中突出显示选定的下一项 json 数据

Posted 2023-02-22

【中文标题】如何默认选择第一项，然后在角度 6 中突出显示选定的下一项 json 数据

【英文标题】：how to select first item by default and then highlight the selected next item of json data in angular 6

【发布时间】：2019-01-17 15:08:21

【问题描述】：

这是我的customer.component.html。我正在使用此组件将我的 json 数据显示为联系人列表

   <mat-card class="example-card" *ngFor="let filteredScreen of filteredScreens; index as i"   [ylbHigh]="color">
            <mat-card-header >
                <div mat-card-avatar class="example-header-image" >
                    <img mat-card-image class="list-img" src="filteredScreen?.img" >
                </div>
                <mat-card-title  [innerHTML]="filteredScreen.name | highlight: name"  [ylbHighlight]="color">
                        <p class="names" [ylbHighlight]="color">   filteredScreen?.name </p>
                </mat-card-title>

            </mat-card-header>
        </mat-card>

如果我点击特定列表项，在我的列表中，它的背景颜色和文本颜色正在改变，如下图所示

我用了两个directives改变背景颜色和文字颜色如下

high.directive.ts

    import   Directive, ElementRef, HostListener,Input  from 
    '@angular/core';

    @Directive(
     selector: '[ylbHigh]'
     )
    export class HighDirective 

     constructor(private el: ElementRef)  

    @Input() defaultColor: string;

    @Input('ylbHigh') highlightColor: string;

    @HostListener('click') onMouseEnter() 
    this.highlight(this.highlightColor || '#e6e6e6');
    

    @HostListener('mouseleave') onMouseLeave() 
     this.highlight(null);
    

    private highlight(color: string) 
    this.el.nativeElement.style.backgroundColor = color;
    

    

highlight.directive.ts

    import  Directive, ElementRef, HostListener,Input  from '@angular/core';

    @Directive(
      selector: '[ylbHighlight]'
    )
    export class HighlightDirective 

      constructor(private el: ElementRef)  

    @Input() defaultColor: string;

    @Input('ylbHighlight') highlightColor: string;

    @HostListener('mouseenter') onMouseEnter() 
      this.highlight(this.highlightColor || '#aa3c9f');
    

    @HostListener('mouseleave') onMouseLeave() 
      this.highlight(null);
    

    private highlight(color: string) 
      this.el.nativeElement.style.color = color;
    



    

现在 onclick 列表项的背景颜色正在改变，但在离开时，我是否可以让 onclick 一个特定的项目背景颜色必须出现，直到我选择下一个项目它应该显示前一个的背景颜色点击项目？？

【问题讨论】：

查看***.com/questions/51711053/…

答案是突出显示在搜索字段中输入的数据，我希望第一项的背景颜色保持不变，单击下一项时它会选择第一项。

【参考方案1】：

我不认为您创建的指令可以执行您设置的操作，因为它不知道指令（即 self）是否为 #1。 但是，您可以将这些循环放在父组件中并在 Angular 中使用 Query（@ContentChildren - 您可以通过指令或组件类型查询）来收集子组件的集合。

【讨论】：

没关系，现在 onclick 列表项背景颜色正在改变，但在离开时，我可以让它在点击特定项目背景颜色之前出现，直到我选择下一个项目它应该是显示上一个点击项的背景颜色？？

这是我真正想要的，谢谢。

如果您可以将其标记为已回答，那就太好了:)