angular-ng-if 相关问题

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。 这是我的代码，不起作用。莱恩...

ng如果需要在ngcontainer中处理

当update flag设置为true时，需要检查field的值是否有变化。如果值发生变化，需要删除旧值并用粗体更新新值。 这适用于总分数，但我

基于两个不同文本的模板逻辑

需要根据布尔值显示两个不同的文本。 我试过这个 测试数据 ` ` ...

Angular：如何以编程方式插入 HTML 关闭标签

这就像一个学院问题。它不适用于特定应用。 有一种方法可以用 *ngIf 条件关闭 HTML 标签，仅使用模板吗？ 例如，我有一个有 4 列的表...

带有多个参数的 Angular ng-if=""

我正在尝试开始角度开发。在查看文档后，仍然存在一些问题。我如何最好地编写一个具有多个参数的 ng-if 对应的 如果（一个&&a...

ng如果不工作。即使我这样做 *ngIf="true" 它也不会显示， *ngIf="false" 也不会显示

如果某个变量为空，我想隐藏一个div，但是即使我直接分配true，*ngIf也不起作用。 树组件.ts 从 '@angular/core' 导入 { Component, OnInit }; 从 '../model/

单击按钮渲染文本区域时出现错误

我有一个按钮，单击该按钮时，应该呈现一个文本区域。我正在使用角度材质。尝试在 textarea 标记中使用 ngIf 但出现错误 - 错误：mat-form-field 必须包含

为什么我的 ng-template 和 ngIf 中的代码无法正常工作

我有一个方法，应该根据该方法显示以下 HTML。然而它根本不起作用。谁能解释为什么我的 ngIf 被忽略？ ... 我有一个方法，应该根据该方法显示以下 HTML。然而它根本不起作用。谁能解释为什么我的 ngIf 被忽略？ <div class="field"> <label for="birthday">Birthday</label> <mat-form-field class="example-full-width"> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker" id="birthday" [formControl]="birthdayFormControl" (dateInput)="calculateAge()" (dateChange)="calculateAge()"> <mat-hint>MM/DD/YYYY</mat-hint> <mat-datepicker-toggle matIconSuffix [for]="picker"> </mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> </div> </div> <ng-template *ngIf="isApplicantMinor()"> // - not working <div class="row"> <div class="column"> <div class="field"> <label for="parentBirthday">Birthday</label> <mat-form-field class="example-full-width"> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker" id="parentBirthday"> <mat-hint>MM/DD/YYYY</mat-hint> <mat-datepicker-toggle matIconSuffix [for]="picker"> <!-- <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>--> </mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> </div> </div> <div class="column"> <div class="field"> <label for="birthday">Parent's Email Address</label> <mat-form-field class="example-full-width"> <mat-label>Email</mat-label> <input type="email" matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher" placeholder="Ex. [email protected]"> <mat-hint>Enter your parents email!</mat-hint> <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')"> Please enter a valid email address </mat-error> <mat-error *ngIf="emailFormControl.hasError('required')"> Email is <strong>required</strong> </mat-error> </mat-form-field> </div> </div> </div> </ng-template> 在 TypeScript 中 isApplicantMinor(): boolean { this.applicantIsMinor = false; if (this.applicantAge < 18) { this.applicantIsMinor = true; } return this.applicantIsMinor; } calculateAge() { // a date on string "22/10/1988 //debugger; this.applicantIsMinor = false; var dateString = moment(this.birthdayFormControl.value).format("MM/DD/YYYY") || moment(new Date().toDateString()).format("MM/DD/YYYY"); let age: number = 0; if (dateString === undefined || dateString?.length === 0) { dateString = new Date().toDateString(); } var dateParts = dateString.split("/"); var dateObject = new Date(+dateParts[2], +dateParts[0], +dateParts[1]); console.log(dateObject); if (dateString) { var timeDiff = Math.abs(Date.now() - new Date(dateObject).getTime()); age = Math.floor(timeDiff / (1000 * 3600 * 24) / 365.25); console.log(age); } this.applicantAge = age; if (this.applicantAge < 18) { this.applicantIsMinor = true; } return age; } 将 ng-template 替换为 ng-container。原因是*ngIf内部使用ng-template

组件属性中的 Angular if 条件

如果之前有人问过这个问题，我深表歉意，我已经搜索过但找不到解决方案，所以我想我会向这里的好人寻求帮助。好的，问题是，我有以下代码， 如果之前有人问过这个问题，我深表歉意，我已经搜索过但找不到解决方案，所以我想向这里的好人寻求帮助。好吧，问题是，我有以下代码， <footer-price *ngIf="showPriceWithSavings" title="{{ getTitle() }}" price="{{ getPrice(id, shouldShowPrice) }}" info="or pay {{ getInfo(id, shouldShowPrice).price | currency : 'GBP' : 'symbol' : '1.2-2' }}" discount="You’ve saved <b>{{ getSavePrice(id, shouldShowPrice).savings | currency : 'GBP' : 'symbol' : '1.2-2' }}</b>" [calculated]="true"> </footer-price> 现在对于 Info 属性，我想在此处添加一个条件，以显示文本 to pay ... 或根本不显示 NO 文本。我可以在 info 属性中放置一个条件吗？还是需要使用 *ngIf 条件创建一个全新的组件？！？ 希望我的问题有意义，并期待一些精彩的解决方案 我在这里回答了类似的问题：https://stackoverflow.com/a/76951173/2005232。使用指令。下面是从那里复制的指令代码。您可以重复使用它并相应地更改属性名称。 可以在这里找到一个工作示例：https://stackblitz.com/edit/conditional-formcontrolname import { Directive, Input, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[appConditionalName]', standalone: true }) export class ConditionalNameDirective { @Input() readonly appConditionalName: string = ''; @Input('condition') readonly condition: boolean = false; constructor( private readonly viewContainerRef: ViewContainerRef ) { } ngAfterViewInit(): void { if (this.condition) { const el = this.viewContainerRef.element.nativeElement as HTMLInputElement; el.setAttribute('formControlName', this.appConditionalName); } } } 这就是从父组件调用它的方式： <input appConditionalName="firstName" [condition]="condition" />

使用 ng-container 在 *ngIf 中嵌套条件

我正在处理需要根据某些条件显示行列表的需求。 有一个表格单元格（td），其值应根据某些条件填充。 我想要以下内容