Блог

я использую angular 10 и хочу создать интерфейс, в котором при нажатии на элемент (массива [???]) остальные сворачиваются (в этой более простой версии меняются цвет и ширина).

Затем, если вы нажмете на другой, он вернется в нормальное состояние, а все остальные разрушатся, и если вы снова нажмете на второй, все вернется в нормальное состояние.

Изображения внизу.

Я смог сделать только противоположное первой части: если вы нажмете на элемент, этот изменится.

HTML:

 <div *ngFor="let name of disney" class="basic" (click)="function(name)" [class.selected]="clickedClass === name">
    {{name}}
</div>
  

Ts:

 disney: string[] = ['pippo', 'pluto', 'topolino'];

clickedClass: any;
  function(name) {
    this.clickedClass = name;
  }
  

Css:

 .basic {
    height: 50px;
    background-color: beige;
}

.selected {
    height: 100px;
    background-color: burlywood;
}
  

3 изображения для того, чтобы вы поняли, что я имею в виду:

Если вы, гипотетически, нажмете на последний абзац 1-го изображения, остальные разрушатся, как показано на 2-м изображении.

Все, кроме одного нажатого, разрушились, и если вы нажмете на средний абзац, вы получите третье изображение

Если вы нажмете на открытый абзац, вы перейдете к 1-му изображению

Решаемая:

HTML:

 <div style="margin-bottom: 30px;" *ngFor="let name of disney" (click)="function(name)"
    [class.basic]="basicClass == 'basic' || [basicClass == '' amp;amp; collapsedClass == ''] "
    [class.selected]="selectedClass === name"
    [class.collapsed]="collapsedClass == 'collapsed' amp;amp; selectedClass !== name">
    {{name}}
</div>
  

css:

 .basic {
    height          : 100px;
    background-color: beige;
}

.selected {
    height          : 100px;
    background-color: rgb(135, 207, 147);
}

.collapsed {
    height          : 50px;
    background-color: rgb(158, 185, 235);
}
  

ts:

 disney: string[] = ['pippo', 'pluto', 'topolino'];

  selectedClass: string;
  collapsedClass: string;
  basicClass: string;

  function(name) {
    if (this.selectedClass === name) {
      console.log(name);
      this.basicClass = "basic";
      this.selectedClass = '';
      this.collapsedClass = '';
    }
    else {
      this.selectedClass = name;
      this.collapsedClass = "collapsed";
      this.basicClass = '';
    }
  }