Question

任何帮助或提示将不胜感激。我正在将Angular 8与Bootstrap 4一起使用。这是我的home.component.html

                          <table class="table" border="0">
            <thead class="thead-light">
              <tr>
            <th scope="col">#</th>
            <th scope="col">Report Issued Date</th>
            <th scope="col">Report Name and ID</th>
            <th scope="col">Report Status</th>


              </tr>
            </thead>
            <tbody *ngFor="let report of patient?.listDiagnosticReport">
            <tr>
              <td>{{report.id}}

              </td>
              <td>{{report.reportIssuedDate}}</td>
              <td>
                <button (click)="onShow(report.reportId)"> 
                {{report.reportName+"("+report.reportId+")"}}
                 </button>
              </td>
              <td>{{report.reportStatus}}</td>
            </tr>



            <tr id="{{report.reportId}}"  *ngFor="let procedureRequest of report?.listOfProcedures"  [hidden]="showRow">
                <td [attr.colspan]="4">
                Specimen Collected By: {{procedureRequest.procedureName}}
                <br/>
                Specimen Collection Date: {{procedureRequest.datePerformed}}
                <br/>
                Procedure Name: {{procedureRequest.procedureName}} 
                </td>
            </tr>

            </tbody>

这是我的home.component.ts：

 export class HomeComponent implements OnInit {
  showRow: boolean = true;


  onShow(rowId: string)
  {
    if (this.showRow === true)
    {
      this.showRow = false;

    }
    else
    {
      this.showRow = true;
    }
  }

我在该行上放置了一个id，当它第一次加载时，所有行都消失了。当我单击按钮时，它会以reportId作为参数触发onShow方法。如何在Angualr 8中显示特定行？

感谢大家的建议和帮助。我可以在开始时隐藏该行，然后单击按钮显示该行。

         onShow(reportId: string) {
        const el = <HTMLElement>document.querySelector(`#${reportId}`);
        if (el.hidden === false) {
        el.hidden = true;
        } else {
         // el.classList.remove('hidden');
           el.hidden = false;
        }
      }

我的问题是我有多个具有相同ID的行。实际上，我有3个具有相同ID的行，当我单击按钮时，它仅显示1行，而不显示其他2行。

这是我的home.component.html：

         <tr id="{{report.reportId}}"  *ngFor="let procedureRequest of report?.listOfProcedures"  [hidden]="showRow">
                <td [attr.colspan]="4">
                Specimen Collected By: {{procedureRequest.procedureName}}
                <br/>
                Specimen Collection Date: {{procedureRequest.datePerformed}}
                <br/>
                Procedure Name: {{procedureRequest.procedureName}} 
                </td>
         </tr>

以下是网页结果：

Answer 1

代码无法正常工作的原因是因为您的showRow变量将应用于所有tr元素。

基本上发生了什么

<tr [hidden]="true">
</tr> 
<tr [hidden]="true">
</tr> 
<tr [hidden]="true">
</tr> 
<tr [hidden]="true">
</tr> 
<tr [hidden]="true">
</tr>

因为showRow是true，所以当您将变量应用于循环元素时，它必须是唯一的

您需要执行以下操作

component.html

<!-- ... -->
<tr id="{{report.reportId}}"  *ngFor="let procedureRequest of report?.listOfProcedures">
  <! ... -->
</tr>

component.ts

showHide(reportId) {
  const el = <HTMLElement>document.querySelector(`#${reportId}`;
  if (el.classList.contains('hidden') {
    el.classList.remove('hidden');
  } else {
    el.classList.add('hidden');
  }
}

component.css

tr {
  display: block;
  // ...
}
tr.hidden {
  display: none;
  // ...
}

基本上，当您单击某个元素时，它将把hidden类应用于该元素，而不是所有tr元素

OR

如果您可以控制报表对象，则可以添加一个隐藏字段

report: {
  reportId: 1234,
  hidden: false
}

，然后在您的showHide方法中

showHide(report) {
  report.hidden = report.hidden ? false : true;
}

然后在您的组件中

<tr id="{{report.reportId}}" [hidden]="report.hidden">
</tr>

Answer 2

创建一个带有reportId并隐藏的对象

report = {reportId: number | string, hidden: boolean}

，然后基于该列表中的报告数量创建报告对象列表

for example: reports: report[] = [{reportId: 1234, hidden: false}, {report 1235, hidden: false}]

然后您可以在onShow方法中传递该对象。

onShow(reportId) { retrun !reportId.hidden; }

您可以通过html页面传递报告

<button (click)=onShow(reportId)></button>

注意：此处您将报告保存在ts文件中

如何使用angular 8显示和隐藏特定的表格<tr>行

2 个答案: