如何默认 select 第一项，然后突出显示 angular 中 json 数据的下一项 select 6

Question

这是我的 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 特定项目背景颜色必须出现，直到我 select 下一个项目应该显示上一个点击项目的背景颜色??

Answer 1

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

如何默认 select 第一项，然后突出显示 angular 中 json 数据的下一项 select 6

how to select first item by default and then highlight the selected next item of json data in angular 6

angular-directive

angular

angular6