我是角度新手。我正在学习指令。我正在使用pTooltip来自primeng. 但我想根据条件在 pTooltip 中显示文本。
让我们以 Stack Overflow 本身为例。您不能对一个答案投两次赞成票。如果用户没有对该特定文章进行投票，则他应该收到 msg1，否则他应该收到 msg2。在哪里：
msg1="I found this article very useffeul.";
msg2="You've already upvoted this article";
这是我的代码：
文章.组件.html
msg1="I found this article very useffeul.";
msg2="You've already upvoted this article";
文章.组件.ts
<button
class="btn btn-success"
*ngIf="allowUpvote ? pTooltip={{msg1}} : pTooltip={{msg2}}
[disabled]="!allowUpvote">
UPVOTE
</button>
但我收到这个错误：
解析器错误：绑定不能包含 [allowUpvote ? 中第 24 列的分配 pTooltip={{msg1}} : pTooltip={{msg2}}]
请给我一些指示。
我创建了一个 mat-dialog 组件来触发 http 响应。当我在 mat-dialog 的 html 中包含 ngIf 语句时，它不会被处理。在控制台上显示如下警告。
无法绑定到“ngIf”，因为它不是“div”的已知属性。
NgIf 在项目中的所有其他组件中运行良好。
在打字稿文件中调用 mat-dialog。
this.matDialog.open(PaymentModelComponent, {
width: "630px",
data: { message: response.comment },
autoFocus: false,
height: "630px",
});
html代码
<div *ngIf="true"><p>Show this only if "show" is true</p></div>
为什么 ng-if 不能在 mat-dialog 中工作？
如何*ngIf使用异步管道检查内部长度？
我尝试这样做，但它不起作用。正确的做法是什么？
<mat-menu #favoriteMenu="matMenu">
<ng-container *ngIf="items$ | async as items && items.length; else empty">
<button mat-menu-item *ngFor="let item of items">
...
</button>
</ng-container>
<ng-template #empty>no favorite here</ng-template>
</mat-menu>
在我的Angular应用程序中,div如果变量为true ,我想要显示一个变量,如果变量为false则要消失.
但是,它不起作用.看我的小提琴
谁能帮我理解为什么？
HTML
<div ng-controller="MyCtrl">
<div id="newProjectButton" class="project" ng-click="newProjectActive()" ng-if="!creatingNew">
<h1> + </h1>
<h3> New Project </h3>
</div>
<div id="newProjectActive" class="project" ng-if="creatingNew">
<form>
<input name="name" ng-model="newProjectName" type="text"></input>
<button ng-click="newProject()" type="submit" class='btn btn-primary'>Save</button>
</form>
</div>
</div>
JS
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.creatingNew = false;
$scope.newProjectActive = function () {
$scope.creatingNew = true;
}
$scope.newProject = function () {
alert($scope.newProjectName);
}
}
我正在使用JSON文件创建一个Ionic应用程序.当我想要使用ngIf和JSON时,一切都很好.我不知道如何使用它...例如我想这样做:
<p *ngIf="{{item.price }} == 1"> Okey </p>
<p> *ngIf="{{item.price}} == 2"> Okey2 </p>
在json文件中,如果价格的值为1,它将显示"Okey".
我希望你理解我.谢谢
我的角度应用程序中有以下 html
\n\n <div class=\'order-list\'>\n <div *ngFor="let order of orders">\n <div class="row ciev-row header-row d-none d-lg-flex bg-white" [ngClass]="{\'last\': i === orders.length - 1}" (click)="toggle(order)">\n <div class="col-sm-3 my-auto">{{order.date}}</div>\n <div class="col-sm-3 my-auto">Livr\xc3\xa9e</div>\n <div class="col-sm-3 my-auto">{{order.order_number}}</div>\n <div class="col-sm-2 my-auto"><span class=\'price\' [innerHTML]=\'order.overallAmount | currencyFormat\'></span></div>\n <div class="col-sm-1 my-auto p-0">\n <i class="fas fa-plus toggle-icon" *ngIf="toggled !== order.functional_id"></i>\n <i class="fas fa-minus toggle-icon" *ngIf="toggled === order.functional_id"></i>\n </div>\n <div class=\'row slider\' [ngClass]="{\'expanded\': toggled === order.functional_id}">\n <div class=\'row ciev-row last extra-data\'>\n <div class=\'col-sm-3 my-auto\'>Produits</div>\n <div class=\'col-sm-3 my-auto\'>Prix HT</div>\n <div class=\'col-sm-3 …我是 Angular 开发的初学者。现在在我的组件中使用 *ngIf 语句。
在搜索时，我发现建议不要在 *ngIf 语句中使用逻辑的文章。
示例1：
<user-component *ngIf="role==='user'"></user-component><guest-component *ngIf="role==='guest'"></guest-component> and so on
示例2：
<div [ngSwitch]="typeOfUser"><user-component *ngSwitchCase="user"></user-component><guest-component *ngSwitchCase="guest"></guest-component><default-component *ngSwitchDefault></default-component></div>
我如何使用这些语句来实现更清洁和高性能的角度应用程序。
附上免费代码营的参考文章， 干净且高性能的 Angular 应用程序的最佳实践