如何使用 typescript 或 javascript 扩展表格中的行

Question

我使用了 Angular 7。我尝试通过单击名称和位置来展开和折叠表格行。但它无法正常打开。 如果我单击地名，则我只想显示该地点的详细信息。但在我的代码中，它打开了所有地点详细信息，名称相同。如何解决这个问题。

app.component.html：

    <table class="table">
    <thead>
        <th> Name </th>
        <th> Place </th>
        <th> Phone </th>
    </thead> 
    <tbody> 
<ng-container *ngFor="let data of data1">
  <tr>
    <td (click)="expanded1 = !expanded1"> <a href="javascript:void(0)">{{data.name}}</a> </td>
    <td (click)="expanded2 = !expanded2"> <a href="javascript:void(0)">{{data.place}} </a></td>
    <td> {{data.phone}} </td>
  </tr>

  <ng-container *ngIf="expanded">
    <tr>
      <td colspan="3">
      <div>Name Details:{{data.name}}</div>  
      </td> 
    </tr>
  </ng-container>

  <ng-container *ngIf="expanded2">
    <tr>
      <td colspan="3">
      <div>Place Details:{{data.place}}</div>  
      </td> 
    </tr>
  </ng-container>


</ng-container>
    </tbody>
</table>

app.component.ts：

export class AppComponent {
      expandContent = true;
      expanded1 = false;
      expanded2 = false;
      data1 = [{
        'name': 'john',
        'place': 'forest',
        'phone': '124-896-8963',
        'expanded': false
      }, {
        'name': 'Jay',
        'place': 'City',
        'phone': '124-896-1234',
        'expanded': false
      }, {
        'name': 'Joseph',
        'place': 'sky',
        'phone': '124-896-9632',
        'expanded': false
      },
      ]
       
    }

演示：https://stackblitz.com/edit/angular-3hylrt?file=src%2Fapp%2Fapp.component.html

Answer 1

你有一些问题。您正在设置

(click)="expanded1 = !expanded1"

，但随后您正在检查

*ngIf="expanded"

，它应该是 ``*ngIf="expande1"` 。

出于某种原因，您还在

(click)

元素上设置了

<td>

，然后通过添加

href="javascript:void(0)"

使链接本身变得无用，这可能会取消点击事件。相反，请单击链接，因为这是标准做法，只需更改 CSS 即可使没有

href

的链接看起来可单击。您正在使用引导程序，因此只需使用其中的实用程序类即可。

另外，这不是“问题”，但当您可以将

<ng-container>

直接放在

*ngIf=""

元素上时，无需用

<tr>

包裹某些元素。

所以这是我建议的改变

p {
  font-family: Lato;
}

tr a {
  cursor: pointer;
}

.details-cell {
  background-color: #ccc;
}

<ng-container *ngFor="let data of data1">
  <tr>
    <td>
      <a class="d-block link-primary" (click)="expanded1 = !expanded1">{{ data.name }}</a>
    </td>
    <td>
      <a class="d-block link-primary" (click)="expanded2 = !expanded2">{{ data.place }} </a>
    </td>
    <td>{{ data.phone }}</td>
  </tr>
  <tr *ngIf="expanded1">
    <td colspan="3" class='details-cell'>
      <div>Name Details:{{ data.name }}</div>
    </td>
  </tr>
  <tr *ngIf="expanded2">
    <td colspan="3" class='details-cell'>
      <div>Place Details:{{ data.place }}</div>
    </td>
  </tr>
</ng-container>

StackBlitz 演示在这里