如何在Angular 2中有条件地关闭html标记

在php中，可以有条件地关闭html标记。 我们能在angular 2中模仿类似的东西吗

比如说

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

一些知识

即使它有效，也可能有更好的解决方案，请参见下面的注释

组件的脚本：

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>

{{items[i]}
{{items[i+1]}
{{items[i+2]}
{{items[i+3]}

---

注意：创建一个数组（行）或数组（项）可能比使用我发布的“仅模板”解决方案更好。

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

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

一种方法是：

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

{{item.Text}

对于有PHP经验的开发人员来说，这是一个常见的挫折，而不是拒绝Angular或任何其他框架（如Ionic）。不幸的是，您不能将

*ngIf

条件放在关闭HTML标记上，并且当您将该条件放在打开的

上时，您也将有条件地排除

中的所有内容，而不仅仅是您所针对的标记

因此，最终，您的代码将相当冗余，但您可以这样解决问题：

<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>

---

对于一个好的老式HTML<代码> /CODE，删除那些代码< >代码>标签也是值得的。她可能已经过时了，但我觉得她几乎就是为这个而生的。

我之前的回答假设你需要为每一个专栏提供不同的内容（用文本“第一”、“第二”、“第三”来表示）

西蒙·阿隆森（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>

---

当我试图以响应的方式在3列上显示数据时，我遇到了这个问题。 我必须在3列中显示的数据是具有不同高度的框（实际上它们是mat扩展面板）。 我已经尝试过从Angular开始使用flex，但这并不好，因为我在盒子之间有空格（在底部和顶部）。 我最终发现了一个布局，通过使用Angular的bootstrap可以很好地工作。 我有一个动态数量的框，必须显示在3列。 最后，它应该看起来或多或少像这样（例如9个框）

---

我的第一个想法是在应该关闭的HTML标记上添加ngFor。你们能解释一下为什么不想关闭它吗？我想在ngFor的某个点关闭它，当某些条件为真时，类似于我提供的示例。谢谢你批改我的帖子！然后你可能应该把段落的内容放在一个变量中，并把变量绑定到'p'标记上。所以我有一个简单的数组，里面有一些数据，我想要的输出是item1 item2 item3 item4 item5 item6 item7 item8在数组中的每四个项目上我想打开行显示四个项目并关闭它。我已经通过将数组转换为多维数组而不是使用嵌套的ngFor指令来实现了这一点，但我想知道是否有可能实现类似于php的功能。Angular2不支持这一点。我前面的示例假设每个列需要不同的内容（用“第一”、“第二”、“第三”表示，但可以是任何内容）.

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

// 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%;
  }
}

<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>

<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>