angular-ng-if 相关问题

NgIf 和零：为什么模板没有被渲染？

我在 Angular 组件上有以下可观察的内容： count$：可观察； this.count$ = this.getCount(); 通过使用以下内容，我得到值 0（零）； this.count$.订阅...

Angular 17 - 在 @if 语法中，如何将函数的返回值存储在变量中并在同一个 @if 块中使用它

就我而言，我有以下代码块，我可以将信息值存储在 *ngIf 表达式块中并在模板中使用，如何使用 Angular 17 中新引入的 @if 语法执行相同操作？ 我

Angular *ngIf 变量具有异步管道多个条件

有关于在 Angular 中使用 *ngIf 的非常好的文档：https://angular.io/api/common/NgIf 但是，是否可以有 *ngIf 异步变量并对其进行多次检查？ 像这样的东西： 有关于在 Angular 中使用 *ngIf 的非常好的文档：https://angular.io/api/common/NgIf 但是，是否可以有 *ngIf 异步变量并对其进行多次检查？ 比如： <div *ngIf="users$ | async as users && users.length > 1"> ... </div> 当然，可以使用嵌套的 *ngIf，例如： <div *ngIf="users$ | async as users"> <ng-container *ngIf="users.length > 1"> ... </ng-container> </div> 但如果只使用一个容器而不是两个，那就太好了。 你可以这样做： <ng-template ngFor let-user [ngForOf]="users$ | async" *ngIf="(users$ | async)?.length > 1 && (users$ | async)?.length < 5"> <div>{{ user | json }}</div> </ng-template> 请记住，当使用来自 http 请求的订阅时，这将触发请求两次。所以你应该使用一些状态管理模式或库，以避免这种情况发生。 这是一个stackblitz。 我看到每个人都在一个标签和类似的解决方法中一起使用 *ngFor 和 *ngIf ，但我认为这是一种 反模式。在大多数常规编码语言中，您不会在同一行上执行 if 语句和 for 循环，对吗？恕我直言，如果您因为他们特别不希望您而必须解决问题，那么您不应该这样做。 不要实践非“最佳实践”。 ✅✅✅ 保持简单，如果您不需要以用户身份声明 users$ | async 的 $ 隐式值： <!-- readability is your friend --> <div *ngIf="(users$ | async).length > 1"> ... </div> 但是如果您确实需要声明as user，请将其包裹起来。 ✅ 对于复杂用例； 请注意，生成的标记甚至没有 HTML 标签，这就是 ng-templates 和 ng-containers 的美妙之处！ @alsami 接受的、经过编辑的答案有效，因为带有星号的 *ngFor 是带有 ngFor 的 ng-template 的简写（无星号），更不用说双异步管道🙏。当您将无星号 ngFor 与 *ngIf 组合在一起时，代码确实有点不一致。你明白了。 *ngIf 优先，所以为什么不将它包装在 ng-container/ng-template 中呢？它不会在生成的标记中使用 HTML 标记来包装您的内部元素。 <div *ngIf="users$ | async as prods; then thenB; else elseB"></div> <ng-template #thenB> <!-- inner logic --> <div *ngIf="prods?.length > 1 && users?.length < 5; else noMatchB"> Loaded and inbound </div> <ng-template #noMatchB>Loaded and out of bound</ng-template> </ng-template> <ng-template #elseB>Content to render when condition is false.</ng-template> ❌不要这样做 <!-- Big NO NO --> <div *ngIf="(users$ | async)?.length > 1 && (users$ | async)?.length < 5"> ... </div> 当您了解管道对生命周期的敏感性后，管道就有点令人畏惧了；他们疯狂地更新。这就是为什么 Angular 没有 SortPipe 或 FilterPipe。所以，呃，不要这样做；你基本上是在创建 2 个 Observables，它们有时会疯狂更新，如果我是对的，可能会导致其子级中的长期数据不匹配。 我遇到了同样的问题，需要一个 *ngIf + 异步变量进行多次检查。 这对我来说效果很好。 <div *ngIf="(users$ | async)?.length > 0 && (users$ | async) as users"> ... </div> 或者如果你愿意的话 <div *ngIf="(users$ | async)?.length > 0 && (users$ | async); let users"> ... </div> 解释 由于 if 表达式的结果被分配给您指定的局部变量，只需以 ... && (users$ | async) as users 结束检查即可允许您指定多个条件 并且 指定当所有条件成功时您希望局部变量保存的值。 注意 我最初担心在同一个表达式中使用多个 async 管道可能会创建多个订阅，但经过一些简单的测试（我可能是错的），似乎实际上只进行了一个订阅。 这是替代版本，具有更清晰的模板： <ng-template [ngIf]="(users$ | async)?.length > 1" [ngIfElse]="noUsersMessage"> <div *ngFor="let user of (users$ | async)">{{ user | json }}</div> </ng-template> <ng-template #noUsersMessage>No users found</ng-template> 请注意，我们使用了 users$ | async 2 次。如果您将 shareReplay() 运算符添加到 user$ Observable: ，这将起作用 public users$: Observable<any[]> = this.someService.getUsers() .pipe(shareReplay()); 这样，内部模板将能够访问 Observable 的最后一个值并显示结果。 您可以在 stackblitz 上尝试一下。 <div class="mb-5 mt-5 mat-typography text-center"> <div *ngIf="(applications$ | async) as applications; else noApplication"> <div *ngIf="applications != null && applications.length > 0; else noApplication"> show all job applications </div> </div> <ng-template #noApplication> <h3>You haven't applied to any jobs. </h3> </ng-template> </div> <div *ngIf="(users$ | async)?.length" > ..... ..... ..... ..... </div> 从 Angular 18 开始，您可以使用 @let 语法 并简单地编写 @let users = users$ | async; <div *ngIf="users?.length > 1"> ... </div>

如何在 ngFor/ngIf 中获取选中的复选框值？

我有这样的数据： 常量列表：数组 = [ { id: 1, 名称: 'somename' } ... ] 然后 html 看起来像这样： 我有这样的数据： const List: Array<Item> = [ { id: 1, name: 'somename' } ... ] 然后 html 看起来像这样： <ng-container *ngFor="let item of list; let i = index;"> <div class="grid"> <mat-checkbox *ngIf="item.id > 4;" #{{item.name}} value="false" type="checkbox"> </mat-checkbox> <mat-form-field *ngIf="item.id <= 4"> <input formControlName="{{item.somename}}" matInput value="" type="number"/> </mat-form-field> <mat-form-field *ngIf="item.id > 4 && item.name.checked"> <input formControlName="{{item.name}}" matInput value="" type="number"/> </mat-form-field> </div> </ng-container> NgFor 迭代数组并创建 mat-checkbox 和 mat-form-field。 数组中的每个项目都有表单字段，但只有某些表单字段项目会被选中。 未获得复选框的表单字段始终可见。 获取复选框的表单字段仅在选中相应的复选框后才可见。 我的问题是如何在复选框为 checked 后显示表单字段？ #{{item.name.checked}}绑定不起作用 当您在*ngFor（或@for）内使用模板引用变量时，“范围”与此循环相关 这是什么意思？您使用“相同”变量名称（在代码中checkBoxId） <ng-container *ngFor="let item of list; let i = index;"> <div class="grid"> <mat-checkbox *ngIf="item.id > 4;" #checkBoxId value="false" type="checkbox"> </mat-checkbox> <!-- you can use---> {{checkboxId.checked}} <mat-form-field *ngIf="item.id > 4 && checkBoxId.checked"> <input formControlName="{{item.name}}" matInput type="number"/> </mat-form-field> </ng-container> 注意：当您使用 ReactiveFormsControls 时不使用“值”，只需为 formControl 赋予值即可。

ionic cordova 和 Angular 项目 ng-如果不工作

项目规格： 离子科尔多瓦 离子7 角度 18.0.3 *ng如果不工作。 页面.html 项目规格： 离子科尔多瓦 离子7 角度 18.0.3 *ng如果不起作用。 page.html <ion-segment [(ngModel)]="segment" (ionChange)="typeChange($event)"> <ion-segment-button value="right"> <ion-label>Right</ion-label> </ion-segment-button> <ion-segment-button value="missing"> <ion-label>Missing</ion-label> </ion-segment-button> <ion-segment-button value="damaged"> <ion-label>Damaged</ion-label> </ion-segment-button> </ion-segment> <div *ngIf="segment == 'right'"> Right </div> <div *ngIf="segment == 'missing'"> Missing </div> <div *ngIf="segment == 'damaged'"> Damaged </div> page.ts： segment = "right"; typeChange(event) { console.log(this.segment); } 以上是我的代码。 预期产量 实际产量 请帮我找到解决方案。 谢谢你 请在page.ts中尝试以下代码： segment: string = 'right'; // Default to 'right' typeChange(event: any) { this.segment = event.detail.value; // Update segment value on change console.log(this.segment); // Log for debugging } 使用严格相等运算符 (===) 而不是 ==。 <ion-segment [(ngModel)]="segment" (ionChange)="typeChange($event)"> <ion-segment-button value="right"> <ion-label>Right</ion-label> </ion-segment-button> <ion-segment-button value="missing"> <ion-label>Missing</ion-label> </ion-segment-button> <ion-segment-button value="damaged"> <ion-label>Damaged</ion-label> </ion-segment-button> </ion-segment> <div *ngIf="segment === 'right'"> Right </div> <div *ngIf="segment === 'missing'"> Missing </div> <div *ngIf="segment === 'damaged'"> Damaged </div>

*ngIf="false" 内的 Angular ng-content 会触发 OnInit 的子组件？

有角度（17 或 18） 不得在 *ngIf="false" 内呈现 但是内容子OnInit被触发了！？ 为了测试，我尝试了： 有角度（17 或 18） 不得在 *ngIf="false" 内呈现 但是内容子OnInit被触发了！？ 为了测试，我尝试过： <div class="content" *ngIf="false"> <ng-content></ng-content> </div> 还有： <app-parent> <app-child></app-child> </app-parent> 对于应用程序子项： ngOnInit() { alert('OnInit done...'); } 然后触发alert，证明ngOnInit即使没有渲染也已经初始化了，因为*ngIf="false"！！？ 在 stackblitz 上的 Angular 17 和 18 上进行了测试： https://stackblitz.com/edit/stackblitz-starters-2tjcvw?file=src%2Fmain.ts 我不明白什么？我究竟做错了什么？有解决办法吗？ 或者，我应该向 Angular 团队报告错误吗？ 尽管您正在父级内部传递组件。该组件仍然使用祖父母组件进行初始化。意思是，我能够从孩子和祖父母那里传递@Input和@Output。因为组件是根据祖父作用域进行初始化的。它只会被投影到父级的 ng-content 中。这是我的理解，所以这不是一个错误。 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { CommonModule } from '@angular/common'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; @Component({ selector: 'app-parent', standalone: true, imports: [CommonModule], template: ` <h2>Parent Component</h2> <div class="content" *ngIf="false"> <ng-content></ng-content> </div> `, }) export class ParentComponent {} @Component({ selector: 'app-child', standalone: true, template: ` <h3>Child Component</h3> <button (click)="outputEmitter.emit()">emit</button> `, }) export class ChildComponent implements OnInit { @Input() input: any; @Output() outputEmitter: EventEmitter<any> = new EventEmitter<any>(); ngOnInit() { alert('OnInit done...' + this.input); } } @Component({ selector: 'app-root', standalone: true, imports: [ParentComponent, ChildComponent], template: ` <app-parent> <app-child [input]="name" (outputEmitter)="emit()"></app-child> </app-parent> `, }) export class App { name = 'Angular'; emit() { alert('emit from child to grandparent'); } } bootstrapApplication(App); Stackblitz 演示

错误 NG0303 无法绑定到 '*ngIf'，因为它不是 'nav' 的已知属性 - Angular 18

我正在 Angular 18 中创建一个项目。目前，我只在前端工作，但我需要创建一个“测试”登录。我遇到的问题是导航栏显示在我的“登录...

Angular 17 ngIf 仅接受布尔值？

我有一个正在运行的 Angular 应用程序，现在似乎出现了重大变化，并且 *ngIf 只接受布尔值，而不将假/真值转换为布尔值。 然而，我找不到任何东西......

如何在RxJS中使用combineLatest有条件地显示组件而不出现空错误？

仅当我的两个可观察量不发出 null 或未定义时，我才想在模板中显示组件。 我使用 RxJS 中的 mergeLatest 运算符来简化条件渲染。不过，我

Angular ng-如果不正确

为什么这不起作用。 感觉有点不合逻辑 工作得很好。 “区域”在范围中定义为 true/false 任何workaro...

*ngIf 和 ngmodel 不适用于 .html 页面

我在 Angular 中使用以下版本，Angular CLI：17.3.4，节点：20.9.0，包管理器：npm 10.5.2。当我在组件中的 .html 页面上使用 *ngIf 或 ngmodel 时，出现以下错误...

如何在*ngFor中使用*ngIf？ [已关闭]

我正在检查员工是否在场或缺席的状态。如果他在场，则显示一个绿色徽章，上面写着“在场”，否则显示“缺席”的红色批次。 我正在检查员工是否在场或缺席的状态。如果他在场，则显示一个绿色徽章，上面写着“在场”，否则显示“缺席”的红色批次。 <tr *ngFor="let item of attendance; let i = index"> <th>{{i + 1}}</th> <td>{{item.empid}}</td> <td>{{item.first_name}} {{item.last_name}}</td> <td>{{item.date | date: 'dd-MM-yyyy'}}</td> <td *ngIf="{{item.status}} == 'present'"> <span class="badge rounded-pill bg-success">Present</span> </td> </tr> 我尝试过使用 ng-template 它不起作用。我尝试自己解决这个问题，但我需要一些帮助。 花括号不是必需的。如下修改您的代码。 将 <td *ngIf="{{item.status}} == 'present'"> 替换为 <td *ngIf="item.status === 'present'"> <tr *ngFor="let item of attendance; let i = index"> <th>{{i + 1}}</th> <td>{{item.empid}}</td> <td>{{item.first_name}} {{item.last_name}}</td> <td>{{item.date | date: 'dd-MM-yyyy'}}</td> <td *ngIf="item.status === 'present'"> <span class="badge rounded-pill bg-success">Present</span> </td> </tr> 您不需要 HTML 标签内的 {{}} 语法。尝试： <tr *ngFor="let item of attendance; let i = index"> <th>{{i + 1}}</th> <td>{{item.empid}}</td> <td>{{item.first_name}} {{item.last_name}}</td> <td>{{item.date | date: 'dd-MM-yyyy'}}</td> <td *ngIf="item.status === 'present'"> <span class="badge rounded-pill bg-success">Present</span> </td> </tr>

Ionic Angular 中的条件表单渲染

我正在尝试使用相同的组件来编辑两个不同类的一些信息，有没有办法让它工作？ 成分： @成分（{ 选择器：“live-care-monorepo-editutente”， 独立：...

如何使用 *ngIf 显示元素后获取元素？

我经常遇到这个问题。我有一个如图所示的元素 默认情况下，isShown = false；通过单击一个元素，...

如何在 Angular 2 中包含无条件的 ng-template 元素

我在 Angular 模板中多次需要 HTML 片段。我决定将其放入 ng-template 元素中并使用在 ... 中复制的该元素，而不是多次编写 HTML 代码

使用当前选定的选项创建 if 语句

我的 Angular JS 页面上有以下下拉列表： ... 我的 Angular JS 页面上有以下下拉列表： <div class="col-md-4 fieldMargin"> <div class="dropdownIcon"> <select name="actions" id="actions" ng-init="Data.formStatus.Action=Data.Actions[0]" ng-options="option.Value for option in Data.Actions" ng-focus="ActionsLabel = true" ng-blur="ActionsLabel = false;" ng-model="Data.formStatus.Action" ></select> <label for="actions" class="labelColor" ng-class="{'dropdownLabelFloat' : (ActionsLabel || Data.formStatus.Action != null), 'dropdownLabel' : !ActionsLabel && !Data.formStatus.Action }"> Action </label> </div> </div> 这些是上述下拉菜单的选项： Test1 Test12 Test14 Test18 Test25 and so on 根据用户在上面的操作下拉列表中所做的任何选择，我想更改同一页面上另一个控件的 ng-model： 这是另一个控件： <div class="col-md-12 inputEmailSection"> <input type="text" name="to" id="to" ng-focus="ToLabel = true" ng-blur="ToLabel = false;" ng-model="Data.EmailInput.To" /> <label for="to" class="labelColor" ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}"> To </label> </div> 在“操作”下拉列表中，如果用户选择“Test1”，那么我希望 ng-model 为： Data.EmailInput.To 但是如果用户从“操作”下拉列表中选择“Test18”或“Test25”，那么我希望 ng-model 为： Data.EmailInput.ToSpecialCase <div class="col-md-12 inputEmailSection"> <input type="text" name="to" id="to" ng-focus="ToLabel = true" ng-blur="ToLabel = false;" ng-model="Data.EmailInput.ToSpecialCase" /> <label for="to" class="labelColor" ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}"> To </label> </div> 是否可以在 angularJs HTML 页面上做一些事情。我尝试做这样的事情： <div ng-if={{Data.formStatus.Action}} = "Test1" > <div class="col-md-12 inputEmailSection"> <input type="text" name="to" id="to" ng-focus="ToLabel = true" ng-blur="ToLabel = false;" ng-model="Data.EmailInput.To" /> <label for="to" class="labelColor" ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}"> To </label> </div> </div> <div ng-else-if="Test18" or "Test25"> <div class="col-md-12 inputEmailSection"> <input type="text" name="to" id="to" ng-focus="ToLabel = true" ng-blur="ToLabel = false;" ng-model="Data.EmailInput.ToSpecialCase" /> <label for="to" class="labelColor" ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}"> To </label> </div> </div> 因此，如果用户从下拉列表中选择“Test1”，那么我想显示： <div class="col-md-12 inputEmailSection"> <input type="text" name="to" id="to" ng-focus="ToLabel = true" ng-blur="ToLabel = false;" ng-model="Data.EmailInput.To" /> <label for="to" class="labelColor" ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}"> To </label> </div> </div> 否则，如果用户选择“test18”或“test25”，那么我想显示： <div> <div class="col-md-12 inputEmailSection"> <input type="text" name="to" id="to" ng-focus="ToLabel = true" ng-blur="ToLabel = false;" ng-model="Data.EmailInput.ToSpecialCase" /> <label for="to" class="labelColor" ng-class="{'inputLabelFloat' : (ToLabel || Data.EmailInput.To!= null), 'inputLabel' : !ToLabel && !Data.EmailInput.To}"> To </label> </div> 我对 AngularJs 很陌生。对此的任何帮助将不胜感激。 你已经快到了，AngularJS 中没有“其他”。所以只需制作 2 个 ng-if 即可。此外，您不需要在任何 {{}} 语句（如 ng-）中使用把手 ng-if。 <div ng-if="Data.formStatus.Action == 'Test1'"> <!-- first block using the ng-model="Data.EmailInput.To" --> </div> <div ng-if="Data.formStatus.Action == 'Test18' || Data.formStatus.Action == 'Test25'"> <!-- second block using the ng-model="Data.EmailInput.ToSpecialCase" --> </div> 我不太明白 Data 在这种情况下是什么，我希望它是控制器 $scope 的 as 语法，无论如何请找到下面的工作示例供您参考，我们可以对测试 1 值进行相等检查，然后我们可以使用数组 includes 方法来检查它是否是多个值之一，测试 18 和测试 25 function Channels($scope) { $scope.ActionsLabel = false; $scope.Actions = [{ Value: 'Test1' }, { Value: 'Test18' }, { Value: 'Test25' }, ]; $scope.formStatus = { Action: '', }; $scope.EmailInput = { To: '', ToSpecialCase: '', }; } angular.module('app', []) .controller('Channels', Channels); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app ng-controller="Channels"> <div class="col-md-4 fieldMargin"> <div class="dropdownIcon"> <select name="actions" id="actions" ng-init="formStatus.Action=Actions[0]" ng-options="option.Value for option in Actions" ng-focus="ActionsLabel = true" ng-model="formStatus.Action"></select> <label for="actions" class="labelColor"> Action </label> </div> </div> <div ng-if="formStatus.Action.Value == 'Test1'"> <div class="col-md-12 inputEmailSection"> <input type="text" name="to" id="to" ng-focus="ToLabel = true" ng-blur="ToLabel = false;" ng-model="EmailInput.To" placeholder="to" /> <label for="to" class="labelColor"> To </label> </div> </div> <div ng-if="['Test18', 'Test25'].includes(formStatus.Action.Value)"> <div class="col-md-12 inputEmailSection"> <input type="text" name="to" id="to" ng-focus="ToLabel = true" ng-blur="ToLabel = false;" ng-model="EmailInput.ToSpecialCase" placeholder="ToSpecialCase" /> <label for="to" class="labelColor"> To </label> </div> </div> </div>

我的 Angular *ngif-condition 不起作用。看起来不错，我找不到任何错误

如果 myFavorites.length 为 0，我希望它显示以下消息： “收藏夹中没有添加的电影。” 否则，将显示主要内容（电影列表）。 如果myFavorites.length为0，我希望它显示以下消息： “收藏夹中没有添加的电影。” 否则将显示主要内容(movieList)。 <div class="movie_container"> <ng-template *ngIf="myFavorites.length === 0; else moviesList"> <p>There are no added movies in the favorites list.</p> </ng-template> <ng-template #moviesList> <div *ngFor="let movie of myFavorites" class="movie_container"> <img class="poster" [src]="'https://image.tmdb.org/t/p/w1280/' + movie.backdrop_path" [alt]="movie.title" /> <h3>{{ movie.title }}</h3> <button (click)="removeFromFavorites(movie.id)">Remove</button> </div> </ng-template> </div> myFavorites 可能为 null 或未定义，尝试使用此方法 if condition: *ngIf="myFavorites?.length === 0; else moviesList" 这应该可以解决您的问题。

错误“TS2339 类型 '' 上不存在属性 'elseblock'”

我正在尝试用 Angular 做一个 If Else： 搜索 清单 ... 我正在尝试用 Angular 做一个 If Else： <div *ngIf="searchForm.value.search else elseblock"> search <div> <ng-template #elseblock> Listing <ng-template> 但是 Typescript 给了我一个错误： 错误 TS2339：类型“”上不存在属性“elseblock”。 我该如何修复它？ 您的代码中似乎存在一些语法错误。 “elseblock”在类型上不存在 表明 TypeScript 无法在其期望的类型上找到名为“elseblock”的属性。 要在 Angular 中将 else 块与 ngIf 一起使用，您需要确保使用正确的语法。以下是如何将 ngIf 与 else 结合使用的示例： <div *ngIf="condition; else elseBlock"> <!-- Content to be displayed when condition is true --> </div> <ng-template #elseBlock> <!-- Content to be displayed when condition is false --> </ng-template> 确保您已正确声明 elseBlock 模板引用变量，并且在 Angular 组件模板中使用正确的语法。 以下是在组件中声明条件的方法： 在你的 component.ts 类中： condition: boolean = true; 在你的 template.html 中： <div *ngIf="condition; else elseBlock"> <!-- Content to be displayed when condition is true --> <p>This is displayed when condition is true.</p> </div> <ng-template #elseBlock> <!-- Content to be displayed when condition is false --> <p>This is displayed when condition is false.</p> </ng-template>

是否可以使用 ngIf 条件在 Angular 中显示 Bootstrap 5 模式弹出窗口？

这里的挑战来自这样一个事实：当使用 ngIf 有条件地显示模态时，当页面加载时，模态元素最初不存在于 DOM 中，因为默认情况下它......

在 Angular HTML 模板中的 *ngIf 中获取字符串长度

我发现了很多解决方案如何通过 Angular 模板中的 *ngIf 检查数组长度，但我需要检查字符串长度。我还通过管道清理了innerHTML。 这是我的代码，不起作用。莱恩...