Question

在php中有可能有条件地关闭html标签。我们可以在角度2中模仿类似的东西吗？

例如

<p>
    Some lorem
<?php  if(someConditionTrue){ echo "</p>"}; ?>

Answer 1

尽管它有效，但可能有更好的解决方案，请参阅下面的注释。

组件的脚本：

private items: string[] = ['test1','test2','test3','test4','test5','test6','test7','test8','test9'];

HTML：

<div *ngFor="let item of items; let i = index">
    <div class="row" *ngIf="i%4==0">
        <div *ngIf="items[i]">{{items[i]}}</div>
        <div *ngIf="items[i+1]">{{items[i+1]}}</div>
        <div *ngIf="items[i+2]">{{items[i+2]}}</div>
        <div *ngIf="items[i+3]">{{items[i+3]}}</div>
    </div>
</div>

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

注意：创建数组（项目）的数组（行）可能更好，而不是仅使用＆＃39;模板。我发布的解决方案。

Answer 2

当我尝试以响应方式在3列上显示数据时遇到了这个问题。我必须在3列中显示的数据是具有不同高度的框（实际上它们是垫扩展面板）。我首先尝试使用Angular的flex，但这并不可行，因为我在框之间（底部和顶部）留有间隔。最后，我发现使用Angular的bootstrap可以正常工作的布局。我有动态显示的框数，必须在3列中显示。最后，它看起来应该差不多（例如9盒）。

<div class="container-fluid">
    <div class="row justify-content-start">
        <div class="col-12 col-lg-4">
            <box1></box1>
            <box1></box1>
            <box1></box1>
        </div>
        <div class="col-12 col-lg-4">
            <box1></box1>
            <box1></box1>
            <box1></box1>
        </div>
        <div class="col-12 col-lg-4">
            <box1></box1>
            <box1></box1>
            <box1></box1>
        </div>
    </div>
</div>

我的第一个想法是将ngFor放在

<div class="container-fluid">
    <div class="row justify-content-start">
        <div class="col-12 col-lg-4">
            <ng-container *ngFor="let cat of categoryProducts; let i = index">
                <box1 *ngIf="i%4 == 0">{{cat.name}}</box1>
            <ng-container
        </div>
        <div class="col-12 col-lg-4">
            <ng-container *ngFor="let cat of categoryProducts; let i = index">
                <box1 *ngIf="i%4 == 1">{{cat.name}}</box1>
            <ng-container
        </div>
        <div class="col-12 col-lg-4">
            <ng-container *ngFor="let cat of categoryProducts; let i = index">
                <box1 *ngIf="i%4 == 2">{{cat.name}}</box1>
            <ng-container
        </div>
    </div>
</div>

解释是这样的。示例：假设我们有一个categoryProducts数组。这些将具有以下索引[0、1、2、3、4、5、6、7、8]。如您所见，该解决方案将在同一阵列上循环3次（虽然有点多余，但可以）。在第一个循环中，我们将仅考虑具有以下索引的元素：0、3、6。其他元素将被忽略，但在接下来的2个循环中将被考虑。在第二个循环中，我们将仅考虑具有以下索引的元素：1、4、7。其他元素将被忽略。在第三个循环中，我们将仅考虑具有以下索引的元素：2、5、8。其他元素将被忽略，但已在其他循环中显示。 box1可以是您需要的每个元素：一个div，一个mat-expansion-panel，一个component等。该示例有3列，但您可以将其用于任意数量的列。就我而言，我需要4。这对于任何数量的盒子都适用。所有这些都将分为三列。

答案 2 :(得分：0)

你为什么需要这个？看起来你正在反对这个框架，而不是接受它。

有几种方法可以做类似的事情，比如ng-if，ng-repeat和ng-show。

一种方式是：

<p>
   <span ng-show='condition' ng-repeat='item in collection'>
       {{item.Text}}
   </span>
</p>

答案 3 :(得分：0)

对于具有PHP经验的开发人员来说，这是一种常见的挫败感，而不是拒绝Angular或任何其他框架（例如Ionic）。遗憾的是，您无法在关闭HTML代码时添加*ngIf条件，当您将条件放在开头<div>上时，您也会有条件地排除<div>内部的所有内容 - 而不仅仅是您要定位的代码。

所以，最后，你的代码将是相当多余的，但你可以像这样解决问题：

<div class="iterable-container">
 <div *ngFor="let item of items; let i = index">
  <div class="iterable-col-1" *ngIf="(i+3) % 3 == 0">
   <p>first column: {{item.name}}</p>
  </div>
  <div class="iterable-col-2" *ngIf="(i+3) % 3 == 1">
   <p>second column: {{item.name}}</p>  
  </div>
  <div class="iterable-col-3" *ngIf="(i+3) % 3 == 2">
   <p>third column: {{item.name}}</p>
  </div>
 </div>
</div>

您还需要一些CSS。这是一些启动者：

.iterable-container {
  background-color: #f2f2f2;
}

.iterable-col-1 {
  display: flex;
  height: 175px;
}

.iterable-col-2 {
  display: flex;
  height: 0;
  left: 33%;
  position: relative;
  top: -175px;
}

.iterable-col-3 {
  display: flex;
  height: 0;
  left: 66%;
  position: relative;
  top: -175px;
}

考虑放弃那些<div>标记以获得良好的老式HTML <table>，也值得考虑。她可能不会流行，但我觉得她几乎是为此而建的。

答案 4 :(得分：0)

我之前的回答假设您需要为每个列提供不同的内容（由文本表示，“first”，“second”，“third”）。

Simon Aronsson 是正确的，这对框架有效。如果您只需要具有一致样式内容的行和列，则可以简化如下：

<div class="iterable-container">
   <div *ngFor="let item of items">
     <div class="iterable-col of-3">
       <p>{{item.name}}</p>
     </div>
  </div>
</div>

我使用.of-2和.of-3类将类似的体系结构应用于2-col和3-col视图。一些首发萨斯：

// assumes you have a color map:
.iterable-container { 
  background-color: color($colors, light); 
}
.iterable-col {
  display: flex;
  position: relative;
  float: left;
  clear: right;
}
// first column
.iterable-col {
  &.of-2:nth-of-type(2n+1){
    width: 50%;
    max-height: 300px; // depending on size of your card
  }
  &.of-3:nth-of-type(3n+1){
    width: 33.33%;
  }
}
// 2nd of 3 columns
.iterable-col.of-3:nth-of-type(3n+2){
  width: 33.33%;
}
// last column
.iterable-col{
  &.of-2:nth-of-type(2n){
    width: 50%;
    max-height: 300px;
  }
  &.of-3:nth-of-type(3n){
    width: 33.33%;
  }
}

Answer 3