Question

如何使用Angular 2实现以下目标？

我想显示数据，在我的foreach期间每行两列。我希望我的结果如下所示：

<table>
<tr><td>VALUE1</td><td>VALUE2</td></tr>
<tr><td>VALUE3</td><td>VALUE4</td></tr>
<tr><td>VALUE5</td><td>VALUE6</td></tr>
</table>

类似的问题：How to display two table columns per row in php loop

具有基本想法的傻瓜：https://plnkr.co/edit/LuEYfK?p=preview

Answer 1

https://plnkr.co/edit/umL80bh0WKr8aPEueCxZ?p=preview

您可以创建管道以获取对值：

@Pipe({ name: 'pairs' })
export class PairsPipe implements PipeTransform {
  transform(value:any) {
    return value.filter((v,i) => i%2==0).map((v,i) => [value[i*2], value[i*2+1]])
  }
}

将管道添加到Module：

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App , PairsPipe],
  bootstrap: [ App ]
})

并使用* ngFor：

 <tr *ngFor="let item of data | pairs">

Answer 2

您可以使用* ngFor for循环：

let data = [{value:'VALUE1'}, {value:'VALUE2'}, {id: 3, value:'VALUE3'},{value:'VALUE4'}];

<table>
 <div *ngFor="let item of data | let isEven = even;let i = index;let isLast= last">
 <tr *ngIf="isEven & !isLast">
   <td>item1 value: {{data[i].value}}</td>
   <td>item2 value: {{data[i + 1].value}}</td>   
   </tr>
 </div>
</table>

我不确定这是不是希望它能帮到你。

祝你好运

Answer 3

基于@YairTawil答案，我创建了一个管道，以每页显示3个项目，如下所示。

通过这种方式在我的项目中实施，我可以分享给谁。

管道：

@Pipe({
  name: 'pairs'
})
export class PairsPipe implements PipeTransform {
  transform(array) {
    return array.reduce((result, item, index) => (
      index % 3 ? result : [...result, [item, array[index + 1], array[index + 2]]]
    ), []);
  }
}

TS代码

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular";
  data = {
    DepartmentFees: [
      { Name: "컴포넌트", Value: 1480.0 },
      { Name: "기판", Value: 1758.0 },
      { Name: "모듈", Value: 1617.0 },
      { Name: "렌즈", Value: 1447.0 },
      { Name: "테스트", Value: 1345.0 },
      { Name: "광케이블", Value: 1365.0 }
    ]
  };
}

HTML

<div *ngFor="let item of data.DepartmentFees | pairs">
    <div class="d-flex mt-1">
        <div class="flex-fill pl-3 pr-3">
            <div class="text-left divider_card_title">{{item[0].Name}}</div>
            <div class="text-right value_unit mt-1">억원</div>
            <h3 class="text-right mt-2">{{item[0].Value}}</h3>
        </div>
        <div class="flex-fill pl-3 pr-3">
            <div class="text-left divider_card_title">{{item[1].Name}}</div>
            <div class="text-right value_unit mt-1">억원</div>
            <h3 class="text-right mt-2">{{item[1].Value}}</h3>
        </div>
        <div class="flex-fill pl-3 pr-3">
            <div class="text-left divider_card_title">{{item[2].Name}}</div>
            <div class="text-right value_unit mt-1">억원</div>
            <h3 class="text-right mt-2">{{item[2].Value}}</h3>
        </div>

    </div>

    <div class="dropdown-divider mt-2"></div>
</div>

演示https://stackblitz.com/edit/angular-display-3item-row

如何在Angular 2循环中每行显示两个表列（Angular2相当于PHP＆＃39; array_chunk）

3 个答案: