如何切换Mat-icon（添加/删除）角形材料

Question

我想知道如何正确实现mat-icon的切换。我只想根据此处的解决方案添加用于打开和关闭容器的图标切换开关：tobeimproved

如何在.ts文件中使用 panelOpenState ，这样，默认情况下，mat-icon为（+），并且单击以展开容器时，mat-icon为（-）< / p>

.html

<div class="container">
    <div class="flex-data" *ngFor="let c of dataCountry">
    <div>
      <div (click)="toggle(c)">
        <mat-icon *ngIf="!panelOpenState">add</mat-icon>
        <mat-icon *ngIf="panelOpenState">remove</mat-icon>
      </div>
      <div>{{c.country}}</div>
    </div>
        <ng-container *ngIf="exandedRow?.country === c.country">
            <ul *ngFor="let people of c.people">
                <li>{{people.name}}</li>
                <li>{{people.age}}</li>
            </ul>
            <div>{{c.language}}</div>
            <div>{{c.product}}</div>
        </ng-container>
    </div>
</div>


**.ts**
exandedRow: any;
panelOpenState = false;

  toggle(row: any) {
    if (this.exandedRow && this.exandedRow.country === row.country) {
      this.exandedRow = null;
      this.panelOpenState = !this.panelOpenState;
    } else {
      this.exandedRow = row;
    }
  }

现在切换不正常，如何更好地实现呢？ json位于链接中。