Angular 6导航列表项

Question

  

private commands = ['Comand1, Comand2, Comand3'];

    <div class="basic-container">
      <mat-nav-list>
        <mat-list-item (click)="menuTrigger.openMenu()" *ngFor="let i of commands">
          <div mat-line>
            {{ i }}
          </div>
          <p mat-line>
            {{ i }}
          </p>
          <button mat-icon-button>
            <mat-icon>more_vert</mat-icon>
          </button>
        </mat-list-item>
        <mat-divider></mat-divider>
      </mat-nav-list>
    </div>

我希望项目在另一个之下排序。

Cimmand1

---

Cimmand2

---

Cimmand3

---

Answer 1

只需尝试为每个循环输出添加新行，

 <div class="basic-container">
  <mat-nav-list>
    <mat-list-item (click)="menuTrigger.openMenu()" *ngFor="let i of commands">
      <div mat-line>
        <p>{{i}}</p><hr/> <!--like this-->
      </div>
      <button mat-icon-button>
        <mat-icon>more_vert</mat-icon>
      </button>
    </mat-list-item>
    <mat-divider></mat-divider>
  </mat-nav-list>
</div>

更新：问题实际上与数组定义有关，

private commands = ['Comand1', 'Comand2', 'Comand3'];