javascript - 单行的 Angular6 多个 ngFor - 如何在一个 ngFor 中传递两个值

标签 javascript html angular typescript ngfor

在表头中,我有动态列和搜索排序功能。但对于特定的列,我需要禁用排序功能。 在表中

<thead>
      <tr class="table-head">
        <th *ngFor="let colName of reportColHeader; let i = index">
          {{colName}}
          <i [class]="sortIcons[colName]" (click)="toggleSort(colName, i)"></i>
        </th>
      </tr>
    </thead>

constructor 中,我将值作为数组传递。不是来自服务器,它只是静态的

this.reportColHeader = ['ID', 'LABEL 1', 'LABEL 2', 'More'];

所以结果会像下面这样

<tr>
 <th>ID <i></i></th>
 <th>LABEL 1 <i></i></th>
 <th>LABEL 2 <i></i></th>
 <th>More <i></i></th>
</tr>

这里我想禁用特定列的 (排序功能)。
不仅是最后一列或第n列。 我的假设是,有可能再有一个像

这样的数组
this.reportColHeaderOptions = ['true', 'true', 'false', 'false'];

通过这个值可以显示或隐藏<i></i>
那么我怎样才能把它传递给ngFor呢? .
注意:这里我不能使用索引,因为索引会改变。
但我可以按照相同的顺序关注 this.reportColHeaderthis.reportColHeaderOpions

最佳答案

为什么不能使用 index ?你可以这样做:

    <th *ngFor="let colName of reportColHeader; let i = index">
      {{colName}}
      <i *ngIf="reportColHeaderOpions[i]=='true'"></i>
    </th>

关于javascript - 单行的 Angular6 多个 ngFor - 如何在一个 ngFor 中传递两个值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53000322/

相关文章:

javascript - PHP 在邮箱后保留选择框值

html - CSS3 背景动画移动内容

php - HTML POST 表单不向 PHP 脚本发送任何数据

javascript - Angular/TypeScript 中的构造函数名称错误?

javascript - Sweetalert 不等待用户操作并继续执行代码流

javascript - 通过历史向后移动,跳过具有不同查询字符串的同一页面

javascript - 渲染部分 View 后阻止主视图渲染

javascript - 带有单选标签的简单js计算器

html - 如何在两个html标签中显示很长的内容?

javascript - 如何将从后端呈现的参数传递给angular2 bootstrap方法