标签: angular-ng-if

我知道ng-repeat只适用于数组.

我的问题是当我不知道从服务器获取的对象是数组还是仅对象时.
我需要动态确定它是否是数组或对象,并且只有当它的数组使用ng-repeat时才需要.

我的问题是什么是使用ng-repeat with condition的最好方法 - 只有当对象是一个数组时？

我试着用这种方式解决问题:

 <div ng-if="Array.isArray(myObj)"ng-repeat="item in myObj">
      <do-some-stuff item='item'></do-some-stuff>
 </div>
 <do-some-stuff ng-if="!Array.isArray(myObj)" item='myObj'></do-some-stuff>

但它不起作用.

我希望ngIf在范围内的数组中有特定值时触发.

所以我在我的范围内有这个:

var orders = [{
    "order_no": 1,
    "color": ["blue", "pink", "red"]
}, {
    "order_no": 2,
    "color": ["yellow", "blue", "white"]
}];

我希望有一个ngIf显示一个元素,例如,如果其中一个颜色数组中存在黄色(假设我事先不知道数据范围,但事先知道结构).

我发现这样做的唯一方法是事先知道范围的结构,所以fx ng-if="orders[1].color[0] === 'yellow'"

谢谢!

假设我有一个数据数组如下.

datas : [
  {
    nums : [121,222,124,422,521,6312,7141,812]
  },{
    nums : [121,222,124,422,521,6312,7141,812]
  },{
    nums : [121,222,124,422,521,6312,7141,812]
  }
]
nums = [121,222,124,422,521,6312,7141,812]

我想在序列号之后显示数组中的偶数,如下所示.

1. 222
2. 124
3. 422
4. 6312
5. 812
6. 222
7. 124
8. 422
9. 6312
10. 812
11. 222
12. 124
13. 422
14. 6312
15. 812

但我无法想出在"偶数"检查后设置索引的方法.目前,我使用以下代码显示文本.

<div *ngFor="let data of datas">
  <div *ngFor="let num of data.nums; let rowIndex = index">
    <div *ngIf="num % 2 == 0">
      {{rowIndex+1}}. {{num}}
    </div>
  </div>
</div>

但它显示出来

2. …

我想检查实际元素是否有值.

例如,我想检查巧克力是黑色还是白色.根据这个,我想显示正确的文本.

<ng-container *ngFor="let chocolate of product.getChocolates();">
     <md-card *ngIf="chocolate.getName() == black">IT IS BLACK</md-card>
     <md-card *ngIf="chocolate.getName() == white">IT IS WHITE</md-card>
</ng-container>

如何修复代码,以便它可以工作？

我在想哪一个更快的ng-if或ng-switch？假设我们有一个案例:10个不同的div,一次只需要一个.如果使用ng-switch而不是ng-if,速度是否有任何差异？

如果使用ng-if,将单独评估所有元素,但ng-switch是否也这样做？

使用角1.x

我有一个模板

<ng-container *ngFor="let text of texts[i]; let j = index">{{text}}
  <input type="text">
      </ng-container>

我也有一个数组 myWords

myWords = ['orange', 'blue', 'green'];

我怎么能像占位符一样插入这些词，但仅在特殊情况下，例如

this.app-part

我的应用程序包含3个部分，但我只希望myWords在第3部分中有一个占位符（来自的单词），如果我有第1或第2部分，则在那里不需要任何占位符。

我有一个mat-icon和一个mat-badge包含一个数字。

我正在寻找mat-badge仅当数字为<=0.

我做*ngIf了整个mat-icon，结果很明显，它删除了mat-icon和mat-badge。

这是代码

<mat-icon matBadge="{{matBadge}}" class="icon">shopping_cart</mat-icon>

我有一张地图，看起来像：

let mapToSearch =
{
  'aaa': '123',
  'bbb': '456'
}

我有一个变量：

let keyToFind = 'aaa';

在我的 HTML 模板中，在 Angular*ngIf块中，我想检查是否keyToFind与此地图中的任何键匹配。

像JS这样的东西array.indexOf()：

<ng-container *ngIf="mapToSearch.indexOf(keyToFind)">
  Hello world
</ng-container>

模板中的地图可以实现这样的事情吗？

更新（包括解决方案）

感谢您的所有回答。您的所有答案都适用于使用对象文字（这是我的错误 - 我应该在问题中以不同方式声明地图）。

但是，对于 ES6 地图，我发现我可以map.has(key)在模板中使用。

声明地图map.set()：

let mapToSearch = new Map();
mapToSearch.set('aaa', '123'};
mapToSearch.set('bbb', '456'};

模板：

<ng-container *ngIf="mapToSearch.has(keyToFind)">
  Hello World
</ng-container>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/has

该问题的工作原理如下.我有一些实际上像这样的代码:

<content1>
    <mat-horizontal-stepper *ngIf="somevar" >
        <content2></content2>
    </mat-horizontal-stepper>
    <mat-vertical-stepper *ngIf="!somevar" >
    <content2></content2>
    </mat-vertical-stepper>
</content1>

我的意思是,如果somevar为true或false,则content2始终相同,但mat-stepper是垂直或水平的

如何在不复制content2代码的情况下实现这一目标？

Posdata:我无法创建另一个组件来保存content2的内容,因为我需要在stepper中的content1中使用的变量,我不想绝对地复制/粘贴代码.这只是我将如何根据somevar呈现内容的一个方面.

我想使用ngIf更改在迭代中显示的名称，我正在尝试执行以下操作：

*ngIf="detail.name=='dieselG_d'? detail.name='Diesel Green':Diesel Red

并且控制台记录了以下错误：

Uncaught Error: Template parse errors: