标签: angular2-template
angular2：为什么我们将 asterik 与 ngif 和 ngfor 一起使用？
这是所提问题的示例代码。<p *ngIf="heroes.length >= 4">There are many heroes!</p>
如果我删除 * 它会给我错误
推荐指数
解决办法
查看次数
Angular：在 HTML/模板中使用另一个模块的功能
我有以下模块：
// in module app/util/utils.ts
export function isNullOrUndefined(obj: any) {
return obj === undefined || obj === null || obj === 'undefined' || obj === '';
}
我想在我的组件中使用该函数：
// in module app/component/component.ts
@Component({
selector: 'app-component',
template: `
<span *ngIf="!isNullOrUndefined(value)">Should not be there</span>
`
})
export class Component {
value = null;
}
但是，加载组件时我收到以下错误消息：
Component.html:2 ERROR
TypeError: _co.isNullOrUndefined is not a function
at Object.View_Component_1._co [as updateDirectives] (Component.html:2)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13065)
at checkAndUpdateView (core.es5.js:12245)
at callViewAction (core.es5.js:12610)
at execEmbeddedViewsAction (core.es5.js:12568) …推荐指数
解决办法
查看次数
如何在 Angular 中向 body 标签添加事件？
我想找到一种更好的方法来实现此功能。
我正在尝试向 body 标签添加一个 Even 。我正在使用 Angular 4。由于 body 标记（在 index.html 中）不是通过组件处理的，因此我无法使用 Angular 方式来完成此操作。
我通常会为 xyz.component.html 做这样的事情：
(click)="myMethod()"
xyz.component.ts 中类似这样的东西
public myMethod(): void {
// do something here
}
由于我对 Angular 的了解有限，除了将事件直接添加到 body 标记之外，我想不出更好的方法来做到这一点，如下所示：
<body onscroll="myMethod()">
并将实际函数放置在 index.html 文件本身头部的脚本标记之间，如下所示：
<head>
<script>
function myMethod(){
// do something here
}
</script>
</head>
我尝试将事件侦听器添加到 app.component.ts 类内的主体（窗口/文档），如下所示：
export class AppComponent implements OnInit{
public myMethod(): void{
window.addEventListener('myEvent', this.myEventHandler, false);
}
}
这对我不起作用。检查该元素后，我可以看到该事件未附加。
推荐指数
解决办法
查看次数
以角度将地图转换为 json 对象
我目前正在使用 Angular 4 开发一个应用程序。我想知道是否可以在 angular 中将地图转换为 json ？这是我的地图结构
selectedLanguageDetails.set("languageName", element.languageName);
selectedLanguageDetails.set("languageCode", element.languageCode);
selectedLanguageDetails.set("internalId", element.internalId);
json结构
"languages": [
{
"internalId": 101,
"languageCode": "ms",
"languageName": "Malay"
}
],
推荐指数
解决办法
查看次数
Angular2，如何获取当前活动组件选择器以将其作为全局类用于 css 样式
我想为每个组件应用样式，我正在寻找的是我想获取当前的组件选择器名称并将其作为类名传递，如下所示
<div [class]="component-slector-name">
<router-outlet></router-outlet>
</div>
这样对于每个活动组件，我都会得到它的选择器并将其设置为 div 标签以自定义 css 样式..
有谁知道如何做到这一点 ？？提前感谢您的时间和支持。
推荐指数
解决办法
查看次数
带有 svg 元素的 Angular svg 匹配组件
考虑以下<svg icon="close"></svg>为了显示图标而匹配的组件：
@Component({
selector: 'svg[icon]',
template: `<use [attr.xlink:href]="'icons.svg#'+icon"></use>`
})
export class SvgIconComponent {
@Input() icon: string;
}
这会失败，因为 Angular 找不到该<use>元素，因为它不知道组件的内容在<svg>. 如果 Angular 会注意到selector确保了这个事实，那就太好了，但事实并非如此。
确切的错误是：
Uncaught Error: Template parse errors:
'use' is not a known element:
1. If 'use' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
显然我可以将 放在NO_ERRORS_SCHEMA组件的模块上，但我不想这样做，因为模块中还有其他组件，并且因为我希望未知元素错误检查起作用。
那么，我如何告诉 Angular 它应该将这个特定组件的内容视为 SVG …
推荐指数
解决办法
查看次数
当鼠标进入或悬停时显示 ngx bootstrap 工具提示，并在单击鼠标从那里移除时移除
我不完全理解触发器究竟为https://valor-software.com/ngx-bootstrap/#/tooltip#triggers-custom做什么的概念
例如，当我们这样做时：
triggers="mouseenter:click"
这是否意味着当我们将鼠标悬停/放置在那里时会显示工具提示并在单击时消失？
如果是这样，是否可以指定工具提示应该消失的两个事件。
例如，我想在将鼠标悬停在工具提示上时显示工具提示，然后在单击它或从那里移除鼠标时使其消失。有任何想法吗？
推荐指数
解决办法
查看次数
如何限制angular2下拉列表中的重复值
这里我提到了当前的图像形式。
1) 它是一个多选下拉菜单。它应该限制重复的税名。对于此图像中CGST选择的两次示例。
选择相同的名称时，它不应显示在此处。所以请帮助我做到这一点。
html
<div class="form-group">
<label for="tax">Tax Name</label>
<select class="form-control" id="tax_name" (change)=" dropdown(tax.value)" [(ngModel)]="model.tax" name="tax_name" #tax="ngModel">
<option value="addNew">
<i class="fa fa-plus" aria-hidden="true"></i>Add New Tax </option>
<hr>
<br/>
<option *ngFor="let i of taxlist" [value]="i.tax_name">{{i.tax_name}} ( {{i.tax_percentage}}% )</option>
</select>
</div>
<div>
<label for="percentage">Tax Percentage</label>
<input type="text" class="form-control" id="tax_percentage" placeholder="Percentage" pattern="[0-9]+" minlength="0" maxlength="3"
[(ngModel)]="per" name="tax_percentage" #percentage="ngModel">
</div>
<button (click)="addContact(tax.value,percentage.value);" type="button" class="btn btn-success btn-sm text-right">
<i class="fa fa-plus fa-lg"></i>
</button>
angular2-forms angular2-directives angular2-template angular
推荐指数
解决办法
查看次数
如何在 *ngIf 的 else 部分指向其他组件
随着我之前的问题的扩展，这里是我需要在其他部分使用模板的另一种情况*ngIf
这是我当前的代码，我在每个页面上使用加载微调器，直到 API 响应返回
<ng-container *ngIf="!isLoading; else spinner">
<form [formGroup]="myForm" novalidate (ngSubmit)="submit()" >
// form content
</form>
</ng-container>
<ng-template #spinner>
<div class="fa-3x tc">
<i class="fas fa-spinner fa-spin"></i>
</div>
</ng-template>
这样我们必须在每个页面上编写相同的#spinner组件，所以我创建了一个具有相同内容的组件。
import { Component } from '@angular/core';
@Component({
selector: 'app-display-loading',
styles: [`.load__spinner { color: black; text-align: center; font-size: 30px;}`],
template: `
<ng-template>
<div class="load__spinner"> <i class="fas fa-spinner fa-spin"></i></div>
</ng-template>
`,
preserveWhitespaces: true
})
export class DisplayLoadingComponent {
constructor() {
console.log('display loading called');
}
}
现在我的问题是如何<app-display-loading> …
推荐指数
解决办法
查看次数
角度输入中的验证错误 [type=number]？
尝试input[type=number]在 Angular 7 中进行验证时遇到一个奇怪的问题，希望有人能提供帮助。
<input class="form-control" type="number" name="entranceFee" min="0" [(ngModel)]="entranceFee" #entranceFee="ngModel" pattern="\\d+" [ngClass]="{ 'is-invalid': entranceFee.touched && entranceFee.invalid }" >
<div *ngIf="entranceFee.invalid && entranceFee.touched" class="invalid-feedback">
<div *ngIf="entranceFee.errors.pattern">Only numbers are permitted</div>
<div *ngIf="entranceFee.errors.min">Value cannot be smaller than '0'</div>
</div>
输入只能接受numbers >= 0。但是每当我输入一个数字值 (0-9) 时，表单就会失效。为什么？当我在控制台中输出 ngModel 时，ngAfterViewChecked()一个数值被写入模型。那么我怎样才能验证这个表格呢？验证器或我的头脑中有错误吗？
使用响应式表单和/或使用此代码实现此代码时也会发生同样的情况 input[type=text]
推荐指数
解决办法
查看次数