Question

我有以下代码：

<ng-container *ngFor="let art of artefacts; let i = index">
  <div *ngIf="art.isSelected == true" fxLayout="row" class="selected-artefacts">
  </div>
</ng-container>

我在 artefacts 中找到所有项目，如果他们有属性isSelected == true则会显示。现在，如果人工制品中没有isSelected = true的元素，我需要显示＆＃34;没有要显示的项目＆＃34;。我如何实现这一目标？

Answer 1

如果使用管道进行过滤（class Abc { public: Xyz& mem; //ILLEGAL IN C++ void DoOperation(Xyz& temp) { mem = temp; } void DOOperation_2() { } DOOperation_3() { } };），则可以使用

| filter

StackBlitz example

<{3}}

中添加了

<div *ngFor="let item of artefacts">{{item.name}} <input type="checkbox" [(ngModel)]="item.isSelected" (ngModelChange)="tick = tick+1"> </div> <hr> <ng-container *ngIf="artefacts | isSelected:tick as result; else noItems">  <div *ngFor="let item of result; let i = index" fxLayout="row" class="selected-artefacts">{{item.name}}</div>  <ng-container *ngIf="!result.length" [ngTemplateOutlet]="noItems"></ng-container> </ng-container> <ng-template #noItems>no Items</ng-template>

Answer 2

循环后你可以简单地拥有$dest = "Z:\This\Is\The\Destination" $safe = Get-Content "C:\locationOFtheTEXTfile\ReadThis.txt" $safe | ForEach-Object{ #find drive-delimeter $first=$_.IndexOf(":\"); if($first -eq 1){ #stripe it $newdes=Join-Path -Path $dest -ChildPath @($_.Substring(0,1)+$_.Substring(2))[0] } else { $newdes=Join-Path -Path $des -ChildPath $_ } $folder = Split-Path -Path $newdes -Parent $err=0 #check if folder exists" $void=Get-Item $folder -ErrorVariable err -ErrorAction SilentlyContinue if($err.Count -ne 0){ #create when it doesn't $void=New-Item -Path $folder -ItemType Directory -Force -Verbose } $void=Copy-Item -Path $_ -destination $newdes -Recurse -Container -Force -Verbose } write-host "Doomsday =("条件。

*ngIf

在组件端有一个检查数组的函数：

<ng-container *ngFor="let art of artefacts; let i = index">
  <div *ngIf="art.isSelected == true" fxLayout="row" class="selected-artefacts">
  </div>
</ng-container>
<!-- here -->
<div *ngIf="!artefacts || hasNoSelectedArtefacts()">
   No items to display
</div>

hasNoSelectedArtefacts(){ return artefacts.filter(art => art.isSelected).length===0; }可用于检查是否有Array.prototype.filter项。

Answer 3

<ng-container *ngFor="let art of artefacts; let i = index">
  <div *ngIf="art.isSelected" fxLayout="row" class="selected-artefacts">
    <!-- Content -->
  </div>
</ng-container>
<ng-container *ngIf="noneSelected">
  <!-- none selected -->
</ng-container>

在您的控制器中

this.noneSelected = this.artefacts.filter(a => a.isSelected).length;

Answer 4

在手机上执行此操作，以便只接听文字。

执行此操作的方法是检查数组长度是否为0.如果是，则将css属性绑定到表示要说出的消息的文本。

轻松

Answer 5

在这种情况下，避免IF / ELSE的另一种方法仅使用CSS，并且可以在任何框架（Angular，React，Vue等）中使用

.no-item:not(:first-child) {
display:none;
}

只需使用任何标签（section，div，ul，...）包装列表，然后在最后一项中添加要显示的消息，然后在上面添加类即可。

在此处找到有效的示例：https://codepen.io/cacothi/pen/vYEJxKR

如何查找我的* ngFor是否为空？

5 个答案: