Как изменить значение NgbCollapse по умолчанию на false?

Значение по умолчанию для ngbCollapse — false, как описано в https://ng-bootstrap.github.io/#/components/collapse. В приведенном там примере используется следующий код: https://ng-bootstrap.github.io/app/components/collapse/demos/basic/plnkr.html

<p>
  <button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed"
          [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
    Toggle
  </button>
</p>
<div id="collapseExample" [ngbCollapse]="isCollapsed">
  <div class="card">
    <div class="card-block">
      You can collapse this card by clicking Toggle
    </div>
  </div>
</div>

Как переопределить значение по умолчанию, чтобы панель инструментов по умолчанию была свернута?


ng-bootstrap
person Mickey Segal    schedule 24.04.2017    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Тоже самое заметил. Инициализируйте переменную в конструкторе, и она отлично работает.

export class AppComponent {
  isCollapsed:boolean;

  constructor() {
    this.isCollapsed = true;
  }
person mike v    schedule 25.04.2017
comment
Спасибо. Полезно иметь несколько подобных примеров того, как разные части подходят друг к другу. - person Mickey Segal; 25.04.2017
comment
Вместо этого я бы предложил использовать встроенные свойства, предоставляемые модулем сворачивания ngBootstrap. - person Elysiumplain; 25.01.2019

arrow_upward
1
arrow_downward

Изменение этого в Typescript, кажется, отвлекает от намерения использовать предоставленные свойства модуля. Вместо этого, используя [ngbCollapse], вам не нужно добавлять в Typescript и иметь больше контроля с преимуществом ngDirectives.

<div id="collapseExample" [ngbCollapse]="!isCollapsed">

Кроме того, при использовании в динамически генерируемом контенте (*ngFor...[ngbCollapse]=) вы можете воспользоваться преимуществами условных состояний ng-if-else.

*ngIf="getIsEditing(buffer); then tableEdit; else tableView;"

person Elysiumplain    schedule 25.01.2019