Angular 7 - Expandir ou recolher Divs em um loop For

Eu tenho vários cartões em um loop For. Em cada cartão, gostaria de mostrar e ocultar o conteúdo dentro do cartão usando um link ou um botão. Não tenho IDs exclusivos para atribuir a cada div que desejo alternar. Existe uma maneira de fazer isso?

O código a seguir expande ou reduz o conteúdo do primeiro cartão apenas, mesmo se qualquer botão "Expandir" ou "Recolher" for clicado em qualquer cartão.

<div *ngFor="let result of results">
    <div class="clr-col-lg-12 clr-col-12">
        <div class="card">
            <div class="card-block">
                <div *ngIf="result?.name">
                    <h3 class="card-title">{{result.name}}</h3>
                </div>

                <div class="expandCollapse">
                    <button (click)="toggle($event)">
                        {{buttonName}}
                    </button>
                </div>
                <div class="expandCollapseContent" *ngIf="showRuleContent">
                    <div *ngIf="result?.cTag">
                        <h5>C Tag</h5>{{result.cTag}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Componente

public showRuleContent:boolean = false;
public buttonName:any = 'Expand';

toggle($event) {
  this.showRuleContent = !this.showRuleContent;

  // CHANGE THE NAME OF THE BUTTON.
  if(this.showRuleContent)  
    this.buttonName = "Collapse";
  else
    this.buttonName = "Expand";
}