一个Angular核心指令,用于切换DOM中目标元素的存在。不要将此标记用于旧版AngularJS中的ng-if指令。
有关于在 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>
我有这样的数据: 常量列表:数组 = [ { 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 应用程序,现在似乎出现了重大变化,并且 *ngIf 只接受布尔值,而不将假/真值转换为布尔值。 然而,我找不到任何东西......
如何在RxJS中使用combineLatest有条件地显示组件而不出现空错误?
仅当我的两个可观察量不发出 null 或未定义时,我才想在模板中显示组件。 我使用 RxJS 中的 mergeLatest 运算符来简化条件渲染。不过,我
为什么这不起作用。 感觉有点不合逻辑 工作得很好。 “区域”在范围中定义为 true/false 任何workaro...
我在 Angular 中使用以下版本,Angular CLI:17.3.4,节点:20.9.0,包管理器:npm 10.5.2。当我在组件中的 .html 页面上使用 *ngIf 或 ngmodel 时,出现以下错误...
我正在检查员工是否在场或缺席的状态。如果他在场,则显示一个绿色徽章,上面写着“在场”,否则显示“缺席”的红色批次。 我正在检查员工是否在场或缺席的状态。如果他在场,则显示一个绿色徽章,上面写着“在场”,否则显示“缺席”的红色批次。 <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>
我正在尝试使用相同的组件来编辑两个不同类的一些信息,有没有办法让它工作? 成分: @成分({ 选择器:“live-care-monorepo-editutente”, 独立:...
我经常遇到这个问题。我有一个如图所示的元素 默认情况下,isShown = false;通过单击一个元素,...
如何在 Angular 2 中包含无条件的 ng-template 元素
我在 Angular 模板中多次需要 HTML 片段。我决定将其放入 ng-template 元素中并使用在 ... 中复制的该元素,而不是多次编写 HTML 代码
我的 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。 这是我的代码,不起作用。莱恩...
当update flag设置为true时,需要检查field的值是否有变化。如果值发生变化,需要删除旧值并用粗体更新新值。 这适用于总分数,但我