Angular 4方法查询本机DOM元素属性？

Question

让我们直截了当地说：

我有这个堆叠的卡片库，其中第一张卡片（在其他2张卡片的顶部）将显示该人物的个人资料），而后面的所有其他卡片都不会显示该个人资料。

下面是打印卡片的ngfor，如下所示：

＆＃13;

＆＃13;

<ng-template ngFor let-person="$implicit" [ngForOf]="peopleAsPreviousCurrentAndNextTriplets" let-first="first" let-last="last" let-i="index">
  <app-card 
    [class.currentCard]="first" 
    [@myAwesomeAnimation]="_state[i]" 
    [prevCard]="first ? person.previous : null" 
    [currentCard]="person.current" 
    [nextCard]="first ? person.next : null" 
  ></app-card>
</ng-template>

＆＃13;

＆＃13;

＆＃13;

当您点击下一个按钮时，系统会调用 [@myAwesomeAnimation] ，它会更新：

1. height
2. z-index（其中3位于前方，2位于中间，1位于后方）
3. left。

我需要能够在卡片位于前面时显示个人资料，如果卡片位于后面则隐藏它。如图中所示，但当前实现在first为真时显示。但是当你点击下一步时，第一个实际上被推回 - 所以从技术上说它不再是前面了。

一种方法是使用elementRef真正获得卡的z-index，但我真的想避免使用这种方法。

是否有＆＃34; Angular 4＆＃34;这个怎么样？

由于

更新

为您提供更多信息。看看我的animation.ts

＆＃13;
＆＃13;
export const animations = trigger('myAwesomeAnimation', [

  state('moveCurrentToBack', style({
    transform: 'translate3d(0%, 0px, 0px)',
    height: '167.3px',
    left: '60px',
    opacity: 1,
    zIndex: 1
  })),

  state('moveNextToCurrent', style({
    transform: 'translate3d(0%, 0px, 0px)',
    height: '239px',
    left: 0,
    zIndex: 3
  })),

  state('movePrevToNext', style({
    transform: 'translate3d(0%, 0px, 0px)',
    height: '203.15px',
    left: '30px',
    zIndex: 2
  })),

  transition('* => moveCurrentToBack', animate('700ms ease-out', keyframes([
    style({
      offset: 0,
      opacity: 1,
      transform: 'translate3d(0px, 0%, 0px) rotate3d(0,0,1,0deg)'
    }),
    style({
      offset: 0.25,
      opacity: 0.75,
      transform: 'translate3d(-5%, 0%, 0px) rotate3d(0,0,1,0deg)'
    }),
    style({
      offset: 0.50,
      opacity: 0,
      transform: 'translate3d(-10%, -30%, 0px) rotate3d(0,0,1,0deg)'
    }),
    style({
      offset: 0.75,
      opacity: 0,
      left: '66px',
      height: '150.3px',
      zIndex: 1,
      transform: 'translate3d(0%, 30%, 0px) rotate3d(0,0,1,0deg)'
    }),
    style({
      offset: 1.00,
      opacity: 1,
      left: '60px',
      height: '167.3px',
      transform: 'translate3d(0%, 0%, 0px) rotate3d(0,0,1,0deg)'
    }),
  ]))),

  transition('* => moveNextToCurrent', animate('500ms ease-in', keyframes([
    style({
      offset: 0,
      left: '30px',
      height: '203.15px'
    }),
    style({
      offset: 0.1,
      left: '24px',
      height: '203.15px'
    }),
    style({
      offset: 0.25,
      left: '18px',
      height: '213.15px'
    }),
    style({
      offset: 0.50,
      left: '12px',
      height: '223.15px'
    }),
    style({
      offset: 0.75,
      left: '6px',
      height: '233.15px'
    }),
    style({
      offset: 1.00,
      left: '0px',
      height: '239.15px'
    }),
  ]))),

  transition('* => movePrevToNext', animate('500ms ease-in', keyframes([
    style({
      offset: 0,
      left: '60px',
      height: '167.3px',
      zIndex: 1
    }),
    style({
      offset: 0.1,
      left: '54px',
      height: '167.3px',
      zIndex: 1
    }),
    style({
      offset: 0.25,
      left: '48px',
      height: '177.3px',
      zIndex: 1
    }),
    style({
      offset: 0.50,
      left: '42px',
      height: '187.3px',
      zIndex: 1
    }),
    style({
      offset: 0.75,
      left: '36px',
      height: '197.3px',
      zIndex: 1
    }),
    style({
      offset: 1.00,
      left: '30px',
      height: '203.3px',
      zIndex: 1
    }),
  ]))),
]);
＆＃13;
＆＃13;
＆＃13;

在这里，卡片正在根据州进行移动。

让我重新解释一下我的问题。

我需要在不使用elementRef的情况下获取卡的zindex。 elementRef有没有任何改编？