3

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

例如

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

5 回答 5

3

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

组件脚本：

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

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

于 2016-11-16T16:27:15.280 回答
1

对于有 PHP 经验的开发人员来说，这是一种常见的挫败感，而不是拒绝 Angular 或任何其他框架（例如 Ionic）。不幸的是，您不能*ngIf在关闭 HTML 标记上放置条件，并且当您将条件放在开头<div>时，您将有条件地排除 INSIDE 内的所有内容，<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>。她可能已经过时了，但我觉得她几乎就是为此而生的。

于 2017-05-17T22:39:06.207 回答
1

当我尝试以响应方式在 3 列上显示数据时遇到了这个问题。我必须在 3 列中显示的数据是具有不同高度的框（实际上它们是 mat-expansion-panel）。我首先尝试使用 Angular 的 flex，但这并不好，因为我在盒子之间（底部和顶部）有空格。通过使用来自 Angular 的引导程序，我终于发现了一个运行良好的布局。我有一个动态数量的框，必须显示在 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>

我的第一个想法是在 <div class="row 上放置一个 ngFor 以便遍历所有框，但问题是......我如何使 <div class="col-12 col-lg-4每 3 个盒子出现一次？我使用了这篇文章的一些帮助，在谷歌上寻找了一整天的解决方案，但我没有找到任何解决方案。最后，我提供了以下解决方案，适用于任意数量的盒子。

<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、组件等。该示例有 3 列，但您可以将其用于任意数量的列。就我而言，我需要 4 个。这适用于任意数量的盒子。所有这些都将分为 3 列。

于 2020-06-29T13:14:47.390 回答
0

我之前的回答假设您需要为每一列提供不同的内容（由文本“第一”、“第二”、“第三”表示）。

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 视图。一些入门 Sass：

// 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%;
  }
}
于 2017-07-12T18:59:46.843 回答
0

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

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

一种方法是：

<p>
   <span ng-show='condition' ng-repeat='item in collection'>
       {{item.Text}}
   </span>
</p>
于 2016-11-16T16:32:58.767 回答