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

zbq4xfa0 于 2023-11-20 发布在 TypeScript

关注(0)|答案(1)|浏览(153)

我使用了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="expanded1">
    <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

typescript

来源：https://stackoverflow.com/questions/77489405/how-to-expand-row-in-a-table-using-typescript-or-javascript

1条答案

按热度按时间

euoag5mw1#

你有几个问题。你正在设置(click)="expanded1 = !expanded1"，但你正在检查*ngIf="expanded"。这是一个错字，但因为你想单独切换每一个，你需要设置data.expanded = !data.expanded而不是共享布尔值。
出于某种原因，您还在<td>元素上设置了(click)，然后通过添加href="javascript:void(0)"使链接本身变得无用，这可能会取消单击事件。相反，将单击放在链接上，因为这是标准做法，只需更改CSS，使没有href的链接显示为可单击。您正在使用 Bootstrap ，所以只需要使用其中的实用程序类。
另外，这不是一个“问题”，但是当你可以直接把*ngIf=""放在<tr>元素上时，就没有必要用<ng-container> Package 某些元素了。
以下是我提议的改变

p {
  font-family: Lato;
}

tr a {
  cursor: pointer;
}

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

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

StackBlitz Demo Here
下面是一个通过向数组中的每个项添加属性来修改对象的示例

const dataFromServer = [
  {
    name: 'john',
    place: 'forest',
    phone: '124-896-8963',
  },
  {
    name: 'Jay',
    place: 'City',
    phone: '124-896-1234',
  },
  {
    name: 'Joseph',
    place: 'sky',
    phone: '124-896-9632',
  },
];

const modifiedData = dataFromServer.map(d => {
  d.expanded1 = false;
  d.expanded2 = false;
  return d;
});

console.log(modifiedData);

型

赞(0）回复(0）举报 2023-11-20

我来回答

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

1条答案

相关问题

热门标签

最新问答