Как выделить только одну панель расширения по клику и сбросить, если выбрать другой - PullRequest
Новая
       40

Как выделить только одну панель расширения по клику и сбросить, если выбрать другой

0 голосов
/ 24 июня 2019

Во-первых, я очень новичок в мире Angular.Пытаясь достичь цели.Я действительно ценю все вклады.Приходя к вопросу.

Я создаю несколько панелей расширения, используя "ngFor".Я хочу выделить или изменить таблицу стилей только для панели, выбранной пользователем.Остальные панели должны иметь таблицу стилей по умолчанию.когда пользователь щелкает по второй панели, он должен выделить вторую панель и восстановить для первой панели значение по умолчанию.

«Цикл ngFor» - это один компонент, который взаимодействует с «панелью расширения мата» в другом компоненте.Поэтому я испытываю трудности с сбросом предыдущей подсвеченной панели, когда пользователь нажимает на другую панель.

Я использовал «стиль CSS - фокус», это сработало.Но проблема в том, что даже если я щелкну где-нибудь на экране, стиль CSS будет установлен по умолчанию.Я хочу только, когда пользователь выбирает другую панель, тогда она должна сбрасываться.

Я также попытался найти предыдущий элемент и текущий элемент и сравнить их на основе этой попытки изменить стиль.Это работает, но я не могу выполнить сброс, если пользователь выбрал вторую панель.Обе подсвечиваются.

Это первый компонент HTML: 

</div>
    <app-cpd-pres-deck-view *ngFor="let pres of allPres; let idx = index;" [pres]="pres" [isExpanded]= "idx==0" ></app-cpd-pres-deck-view>
</div>

Это компонент панели расширения мат HTML: 

<mat-expansion-panel [expanded]="isExpanded" hideToggle="true" style="margin: 5px;" class="prestest"  [(expanded)]="expanded">
        <!-- <mat-expansion-panel [expanded]="false"  (click)="clickIcon()" hideToggle="true" style="margin: 5px;" class="prestest"  > -->
    <mat-expansion-panel-header (click)="openPresDeck()" [collapsedHeight]="'60px'" [expandedHeight]="'60px'">

    <mat-panel-title>
        <mat-icon class="arrow">{{expanded  ?  'arrow_drop_down' : 'arrow_right' }}</mat-icon>
        <div  class="col-md-9" >
            <label class="name" id="lblName"  >{{pres.profileName}}</label>
            <!-- <label class="name" id="lblName"  >{{pres.profileName}}</label>  -->
         </div>...
some more content 
  </mat-panel-description>
</mat-expansion-panel>

Когда страница загружается, она загружаетсявсе панели с таблицей стилей по умолчанию.Теперь при использовании выберите любую панель, она должна выделить эту панель и выполнить сброс, если пользователь выберет другую панель.

Ответы [ 2 ]

0 голосов
/ 24 июня 2019

добро пожаловать в SO и Angular.

Я думаю, вы подошли очень близко, когда попробовали это;

Я также попытался найти предыдущий элемент и текущий элемент и сравнить на их основе пытаются изменить стиль. Это работает, но я не возможность сброса, если пользователь выбирает вторую панель. Оба получают подсвечен.

что вы должны были сделать, это вместо того, чтобы найти предыдущий элемент;

  • на каждом элементе отслеживать выбранный статус (изначально false) 
export class AppCpdPresDeckViewComponent implements OnInit {

  isSelected = false;
}
  • найти все элементы в родительском элементе 
export class FirstComponent implements OnInit {
  @ViewChildren(AppCpdPresDeckViewComponent) panels: QueryList<AppCpdPresDeckViewComponent>;
}
  • сброс всех элементов в невыбранное состояние и выбор текущего элемента 
  selectPanel(selectedPanel: AppCpdPresDeckViewComponent) {
    this.panels.forEach(p => p.isSelected = false);
    selectedPanel.isSelected = true;
  }

в first.component.html 

<app-app-cpd-pres-deck-view #acdw *ngFor="let pres of allPres" [pres]="pres" (click)="selectPanel(acdw)"></app-app-cpd-pres-deck-view>

вот рабочая демоверсия

0 голосов
/ 24 июня 2019

Существует класс в расширении mat, называемый mat-extended, когда этот класс добавляется на выбранную вкладку. Например: 

.mat-expanded {
  background: #f5f5f5;
}

Когда пользователь щелкает другую панель, этот класс добавляется к другой панели.

Вы можете управлять подсветкой на основе этого класса.

...