在带有ngIf的Angular 5组件上使用事件绑定
，可以通过以下步骤实现：
- 首先，在组件的HTML模板中，使用ngIf指令来判断条件是否满足，如果满足条件则显示组件，否则隐藏组件。例如：
<div *ngIf="condition">
<!-- 组件内容 -->
</div>- 接下来，为组件中的元素添加事件绑定。可以使用Angular提供的事件绑定语法，通过在元素上使用圆括号和事件名称来绑定相应的事件处理函数。例如：
<button (click)="handleClick()">点击按钮</button>- 在组件的TypeScript文件中，定义事件处理函数。可以在该函数中编写处理事件的逻辑。例如：
handleClick() {
// 处理点击事件的逻辑
}以上就是在带有ngIf的Angular 5组件上使用事件绑定的基本步骤。通过这种方式，可以根据条件动态显示或隐藏组件，并且为组件中的元素添加事件处理逻辑。
关于Angular的ngIf指令和事件绑定语法的更多详细信息，可以参考腾讯云的Angular文档：
请注意，以上链接是腾讯云的相关文档，仅供参考。
相关·内容
1回答
带角度触觉装置的脚注
、、、、
我希望我的角度应用程序能够在移动设备上显示一个带有单击事件的脚注，用于注入nativeElement.innerHTML的文本。我不认为我在第一次尝试中很好地解释了它，所以我会再试一次，我确实读过关于模板和数据绑定的文章。问题是，当文本被注入nativeElement.innerHTML时，它无法工作，所以我需要一些其他的方法来做到这一点。下面是一些代码和一个失败的plunkr。
import {Component, NgModule, VERSION, ViewChild, ElementRef} from '@angular/core'
import {BrowserMod
浏览 1提问于2017-08-08得票数 0
1回答
我是angular的初学者，我希望在我的组件的一些模板中插入这段HTML代码：
<ng-template #alertMessage>
<p *ngIf="!displayProductInfo" id="alertMessage">Please enter a bar code to display a model.</p>
</ng-template>
我应该将TemplateRef对象与@ViewChild()装饰器一起使用，还是应该使用指令？
非常感谢
浏览 4提问于2021-07-19得票数 0
2回答
下面是另一个Angular2(TS)问题。
在我的应用程序中，我有一个带有按钮的父组件。(class="btn btn-success")当我单击这个按钮时，我调用一个函数createUserBool，它改变了布尔createUserBool的状态。此布尔值与子组件上的*ngIf一起使用，以显示该组件。(<createuser [createUser]="createUserBool" *ngIf="createUserBool"></createuser>)
子组件是一个"Modal“，我想使用这个"Mo
浏览 0提问于2016-03-21得票数 1
回答已采纳
2回答
目前正在攻读Angular5课程，在对这个主题做了一段时间的研究之后，我仍然不完全理解以下内容：
代码：
App.component.html：
<app-server-element
*ngFor="let serverElement of serverElements"
[element]="serverElement"
></app-server-element>
App.component.ts：
import { Component } from '@angular/c
浏览 5提问于2017-11-12得票数 4
回答已采纳
我是Angular 6的新手，所以我遇到了这个问题:我有一个带有行程列表的父组件，我想单击其中一个组件并显示带有该行程位置的google地图。这是我的父组件：
<div class="card ml-3 mt-3 mr-3">
<h5 class="card-header text-white bg-info">Viajes Activos</h5>
<div class="card-body">
<app-trips-table [hidden]="
浏览 0提问于2018-10-30得票数 0
2回答
我用的是角2 rc1。我有一个组件，它显示一个post和一个带有滑块模板的组件。如何将数据从post组件传递给滑块组件
PortfolioDetail.component.ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Http, Response, HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_DIRECTIVES, Router, RouteSegment } from '
浏览 2提问于2016-06-04得票数 0
回答已采纳
1回答
我正在用angular 5和Nativescript做一个应用程序。嗯，在应用程序中，我有不同的页面(组件)，它们都有相同的底部菜单，这是一个单一的组件。我的问题是如何将参数传递给menu组件，因为在menu组件上，我需要知道哪个是当前页面，例如，将一个类设置为菜单的当前页面项目。
一页示例：
<Page>
<ActionBar title="" class="action-bar">
<StackPanel orientation="horitzontal">
浏览 0提问于2018-05-11得票数 1
1回答
角2-分量通信
、、、、
我是Angular2的新手，我正试着把我的注意力集中在@Input和@Output类型的东西上。
举个例子，我有两个组件。我希望组件1中有一个按钮来切换组件2的可见性。
import { Component, Input, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'widget-one',
template:'<div class="widget-one" (click)="sendToWidgetTwo()">&l
浏览 3提问于2017-06-26得票数 1
回答已采纳
<div *ngIf="((one===one)&& (two===two)) || (one===two)"></div>
Angular如何计算这个相当复杂的表达式？
它肯定没有使用eval，那么它如何解析和评估它呢？
有人能给我指个方向吗？
我正在查看ngIf的源代码，但似乎没有发现任何有趣的东西。
似乎在ngIf收到这个值的时候，它已经被angular评估过了。
浏览 3提问于2017-08-30得票数 2
我有用户名单。我希望当光标在按钮上悬停时，它将*ngIf设置为true，然后显示有关用户的信息(当光标离开按钮时显示为false )。
user-list.html**:**
<div *ngFor="let user of users">
<h1>{{user.name}}</h1>
<div onUserHover *ngIf="ngIf">
<p>{{user.description}}</p>
</div>
</div>
user-list
浏览 4提问于2017-03-31得票数 1
1回答
我有一个简单的基于Angular2的web应用程序，与身份验证。我遇到了一个问题，根据用户是否登录，导航栏看起来不同，而且当用户没有登录时，一些组件也不会显示。
例如，当用户单击logout时，导航栏会发生变化，但另一个组件直到页面刷新后才会消失。当按下LogOut按钮时，如何触发元件刷新？
//user.service.ts
logout() {
localStorage.removeItem('id_token');
this.loggedIn = false;
}
//nav.component.ts
import { Component, In
浏览 45提问于2016-03-29得票数 5
我真的很难做到这一点，我花了很长的时间在一个看似简单的实现上。
我有一个带有两个子组件的父组件(引用-结果)：
<quote-table></quote-table>
<call-back-pop-up *ngIf="showCallBackPopUp"></call-back-pop-up>
我在子“引号表”组件中有一个带有单击事件的按钮：
<button class="button-secondary" (click)="showCallbackToggle()">Request a
浏览 1提问于2018-02-02得票数 1
回答已采纳
我对棱角不熟悉，我正在做一种反应形式。
我在'em‘标记上有一个*ngIf指令，它验证输入文本值是否有效，如果不有效，应该将'em’标记注入HTML并显示“必需”
<em *ngIf="!validateLastName()">Required</em>
每当我把鼠标从输入控件移开时，我如何才能得到这个*ngIf？
以下是整个div：
<div class="form-group" [ngClass]="{'error' :!validateLastName()}">
浏览 0提问于2019-01-17得票数 1
回答已采纳
1回答
我正在使用提供者注入器将一个命令从登录组件发送到配置文件组件以注销。尽管控制台日志显示Signout函数已按预期工作，但(HTML) *ngIf指令并没有相应地更改。
我做错了什么？
**Signin component**
import {Component, OnInit, Injectable } from '@angular/core';
import {ProfileUserComponent} from '../profile.user.component/profile.user.component'
@Component({
se
浏览 0提问于2016-11-04得票数 0
我在angular 5工作，我有一些问题。我有两个模型Person和Employee，它们继承自Person并具有自己的属性。在我的组件的html文件中，我创建了一个带有一些输入字段的表单：
<input type="texte" name="name" [(ngModel)]="person.name" />
<input type="texte" name="numberPhone" [(ngModel)]="person.numberPhone" />
<butt
浏览 1提问于2018-05-07得票数 0
我试图监听来自父组件(如 )的子组件上的事件，但该事件从未到达父组件。
我确信代码会在发出事件的子代中运行下面这一行：
this.onResultsRecieved.emit(true);
下面是我的所有代码：
父级：
find-page.component.ts
import { Component } from '@angular/core';
import { NavbarComponent } from '../shared/navbar.component';
import { FindFormComponent } from '../find
浏览 1提问于2016-08-27得票数 6
回答已采纳
在Angular2中，我有一个非常简单的形式：
Form.ts
import {Component, Input} from 'angular2/core'
@Component({
selector: 'my-form',
providers: [],
template: `
<form>
{{ details }}
<input type="text" placeholder="name" />
<input *ngIf="de
浏览 5提问于2016-03-25得票数 2
回答已采纳
4回答
我在用Angular 6。
我有一个组件HeaderComponent，它的html包含一个输入字段，如
header.component.html
<form>
<input (keyup)="search($event)">
</form>
<app-search-result-card *ngIf="searchQuery.length > 3"
[searchQuery]="searchQuery">
</app-se
浏览 1提问于2018-12-18得票数 0
回答已采纳
2回答
我正在使用Angular和ionic创建一个登录系统，并尝试使用(ngModel)来连接变量，以便在字段发生变化时进行更新。我在关注this tutorial export class ModalLoginComponent implements OnInit {
modal;
state = "";
headerText = "Sign Up";
emailInput;
passwordInput;
nicknameInput;
constructor(public toastController: ToastCon
浏览 37提问于2021-03-26得票数 0
如果我的angular2应用程序看起来像这样，顶部的金发女郎要和右边的生姜聊天，他们应该为它组织一个聚会吗？
发出事件，使用输入输出--这是angular2的方式吗？数据应该从子到父流到根，然后从父到子流到点？我是新来的，我经常希望有一些全局对象，在那里我可以保存一些所有组件都需要知道的信息。当该全局对象中的数据发生变化时，它应该神奇地改变它注入的所有其他服务和组件。例如，用户登录/退出，或者如果他单击按钮等等。
import {Injectable} from 'angular2/core';
@Injectable()
export object Globals {
浏览 3提问于2016-02-03得票数 22
2回答
下面是可以在上运行的Angular组件的代码
@Component({
selector: 'my-app',
template: `
<div *ngIf="currentNumber$ | async as currentNumber">
<b>{{currentNumber}}</b>
</div>
<form [formGroup]="simpleForm">
<input type="number" formContr
浏览 0提问于2018-02-06得票数 1
我需要检测在html <img>标签中的图像是否完全加载。
这是我在Angular2组件模板中的代码。
<li *ngFor="let id of imagesId">
<img width="300" src="{{imagesUrl[id]}}"
*ngIf="imagesUrl[id]"
(onload)="loadOk(id)">
<div *ngIf="!imagesLoadSta
浏览 9提问于2017-08-17得票数 2
回答已采纳
4回答
我试图在angular2上做一些事情，但是我无法找到关于这种行为的一些东西。
我有一个实现自定义组件的应用程序，如下所示：
import {Component,Input} from 'angular2/core'
@Component({
selector:'my-comp',
template:`<input type="text" style="text-align:center; [(ngModel)]="inputText"> <p>{{inputText}
浏览 7提问于2016-01-05得票数 16
回答已采纳
在创建一个带有角验证的简单表单时，我遇到了以下问题。
这是出现的错误：
ERROR TypeError：_co.nome是未定义的堆栈跟踪: debugUpdateDirectives@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14871:12 checkAndUpdateView@webpack-internal:///./node_modules/@angular/core/esm5/core.js:14018:5 callViewAction@webpack-internal:///./node_modu
浏览 1提问于2018-04-10得票数 1
回答已采纳
1回答
(对不起，我的英语不是我的第一语言.)
当我用模板调用组件时，我在我的组件中注入了一些输入参数，我有一些问题。
滑块-乘组件. :
import { Component, Input } from '@angular/core';
@Component({
selector: 'slider-multiple',
templateUrl: './slider-multiple.component.html'
})
export class SliderMultipleComponent {
@Input() public mo
浏览 1提问于2018-04-12得票数 3
回答已采纳
我有一个表，如果我单击表中的任何一行，它将在表的右侧显示有关该行的更多详细信息。 我已经声明了在ts上声明的Boolean变量，我将设置为true或false。 现在的问题是，如果我单击第一行，它将获取详细信息并显示它。如果我点击前面显示的表格中的第1行或任何一行，右侧将不会显示详细信息。 实际上我想做的是，我点击第一行，它应该会显示详细信息。如果我单击任何其他行，以前显示的详细信息应该被隐藏，而新的详细信息应该显示出来。我如何通过只使用angular 7和typescript来实现这一点。 ts： show = false;
details(id:number){
this.show=
浏览 23提问于2019-02-15得票数 0
我正在尝试用angular 2创建一个应用程序，并且在我的应用程序中有一个身份验证服务，我的html模板是这样的：
<header>
<div *ngIf="isLogin()"><a href="">profile</a></div>
<div *ngIf="!isLogin()"><a href="">register</a></div>
<div *ngIf="!isLogin(
浏览 1提问于2016-05-15得票数 3
我正在尝试从JSON生成HTML代码到Angular组件模板，并寻找最佳实践。 实际上，我正在获取JSON，并使用*NgFor和*NgIf来实现 const blocks = [
{
id: '1',
type: 'header',
fields: [{
content : 'H1 Header'
}]
},
{
id: '2',
type: 'image',
fields: [{
浏览 14提问于2019-05-22得票数 0
我在我的项目中创建了一个新服务，并向它添加了一些功能。当我试图从组件模板调用服务函数时，我得到了“无法读取未定义的属性'isCompanyEligible‘”的错误。
我试图在组件中创建新函数，并将服务函数分配给它，但我得到了相同的错误。
这是我的服务：
import { FinancialHealth } from 'src/app/shared/models/financial-health';
import { LocalStoreService } from 'src/app/shared/services/local-store.service'
浏览 1提问于2019-06-18得票数 1
我有一个具有以下类定义的ng2组件：
import { Component, OnInit, OnChanges, SimpleChanges, Input, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { SearchService } from '../../services/search.service';
@Component({
selector: 'search',
templateUr
浏览 0提问于2017-08-08得票数 0
1回答
角度模板中的Lodash效率
、、、、
我有一个Angular 2.x应用程序，它在组件中利用了Lodash，我也在考虑在视图模板中使用它。
我注意到Angular (从1.x切换到2.x)放弃了对的一些更密集的视图模板管道(如filter和orderBy)的支持，现在它说“在组件中做它”。
在视图中使用Lodash是否应该遵循相同的建议？为什么我不应该在视图中使用Lodash (或类似的库)，有什么“性能原因”吗？有没有没有影响的时候和有影响的时候？
下面是一些示例用法：
<div *ngIf="_.isEmpty(someVariable)">
....
</div>
<div
浏览 10提问于2017-06-27得票数 0
2回答
我使用了嵌套在同一组件中的组件。当我更改父组件附加函数中的复选框时，调用正确且事件发射器工作正常，但当我更改子复选框时，附加函数被触发，但事件发射器不可用(据我所知，事件发射器与子函数没有绑定)。我想在更改子复选框时发出数据。
如果有人知道答案，请帮助我解决这个问题。使用嵌套在同一组件中的组件的术语是什么？
谢谢你
这是stackblitz链接 (请检查控制台)
tree.component.ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component
浏览 2提问于2020-05-29得票数 3
1回答
在带提前(AOT)编译的Angular 2中，我有一个父组件和一个子组件，如下所示：
<div>
<h1>I am a parent</h1>
<myChild *ngIf="showChild"></myChild>
</div>
我知道子模板是动态插入到DOM中的。
如果showChild的计算结果为false，Angular到底什么时候销毁该子组件？或者Angular会完全销毁子组件吗？是时间角度调用了onDestroy()方法吗？
浏览 1提问于2017-04-06得票数 32
回答已采纳
在角度上，我在html DOM中使用了scrollDispatcher(检查滚动)更改变量标志，但是DOM(ngif)不工作，这是我的测试代码：
// html
<div *ngIf="scrollState">
scrolling!
</div>
// TS
import { ScrollDispatcher } from '@angular/cdk/scrolling';
...
scrollState = false;
...
constructor( private scrollDispatcher: ScrollDispa
浏览 0提问于2019-07-05得票数 2
回答已采纳
3回答
我正在尝试创建一个带有取消和发送按钮的组件，以避免在每个表单上使用c&p，但我找不到一种方法将函数作为参数传递给组件选择器
HTML：
<btn-submit [cancelFunction]='test' [acceptFunction]='test'></btn-submit>
TS父级：
test = () => console.log("this is a test");
TS子项：
import { Component, Input } from '@angular/core';
浏览 0提问于2018-07-27得票数 7
回答已采纳
我有一个角10应用程序，我正在尝试从登录组件中删除导航组件，所以我在nave端组件上创建了一个服务，包含以下代码：
visible: boolean;
constructor() {
this.visible = true;
}
show() {
this.visible = true;
}
hide() {
this.visible = false;
}
toggle() {
this.visible = !this.visible;
}
doSomethingElseUseful() { }
在肚脐组件中，我提出：
浏览 10提问于2020-10-17得票数 1
2回答
我想获取他们在我的密码重置表单中输入的数据，它只有一个字段，即邮件和您输入的用户的邮件，在另一个组件中调用它，如果可能的话，用星号隐藏它。
我试过使用代码片段，但我不太清楚如何使用输入和输出，以及以角度表示事件的方法。
我与你们分享我所拥有的代码和我所追求的目标的形象。
<div class="container-fluid forgot-container">
<div class="row">
<div class="col-md-12 text-center">
浏览 7提问于2020-09-18得票数 0
回答已采纳
我试图通过在我的列上声明函数来动态绑定PrimeNG TreeTable中的更改事件。当我尝试用我的列动态执行更改事件绑定时，它似乎在TreeTable内部不起作用。如果我在angular组件上声明函数并绑定它，我就可以让它工作。 https://stackblitz.com/edit/primeng-treetableedit-demo-wezv7m?file=src/app/app.component.html <p-treeTable [value]="files" [columns]="cols">
<ng-template
浏览 41提问于2020-12-09得票数 0
回答已采纳
2回答
我正在开发一个登录页面。成功登录后，用户将被重定向到另一个页面。在表单中，我保留了表单属性method="post“，因为我不希望用户名和密码出现在url上。但是，在成功登录时，当执行this.router.navigate(['post']);时，我将得到“不能发布/post”的错误。
如果我写method="get"，一切正常，但是用户名和密码出现在url上。请让我知道怎样才是正确的方法来处理这个问题：
login.component.ts
import { Component, trigger, state, style, transition,
浏览 2提问于2016-12-26得票数 0
回答已采纳
2回答
我是Angular 6的新手，这就是我的问题。
在组件中：
ngOnInit() {
this.cols = [
{ field: 'col1', header: 'Column 1', filterMatchMode: 'contains' },
{ field: 'col2', header: 'Column 2', filterMatchMode: 'contains' },
浏览 12提问于2018-09-05得票数 0
回答已采纳
2回答
我是Angular 5上的新手，我有一个这样的按钮：
<button *ngIf="type!='invoices' && this.action==='edit'" disabled (click)="genera(fields.termini)" class="ml-16 mat-raised-button mat-accent" mat-raised-button="" disabled color="primary">Gener
浏览 1提问于2018-07-26得票数 0
1回答
我想隐藏菜单栏上的菜单选择item.When，我选择了contact菜单，在构造函数中，正在发出close值。但我不知道我在哪里以及如何接收它。
在此处联系组件
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import {Http} from '@angular/http';
@Component({
selector: 'app-contact',
templateUrl: './contact.compone
浏览 4提问于2018-02-03得票数 0
我正在创建一个angular2应用程序。我有一个子组件(MountainListComponent)，它由父组件中包含的其他组件(但这并不重要)组成。在子组件中，我有一个山的列表(<my-mountain class="col-md-4" *ngFor="#mountain of mountains" [mountain]="mountain" (click)="onChange()"></my-mountain>)，当我单击一座山时，我希望将一个布尔变量(hidelist)传递给父组件。
下面是这两个组件
浏览 2提问于2016-05-15得票数 1
我已经创建了一个Angular reactive表单，其中标签将通过权限切换到。我希望通过创建一个组件来处理这些语义切换，该组件将负责将数据作为@ input ()获取并呈现特定的input标记。处理这个问题的正确方法是什么？ 有一个父级master-form.component，其中包含带有'formGroup‘的和一个名为input-switch.component的子组件。我通过@Input()将特定的参数传递给子组件。子组件由使用ngIf切换的字段value和formControlName组成。 下面是master-form.component html - <form
浏览 12提问于2019-08-27得票数 2
1回答
我现在在一个问题上被困了一段时间，正在寻找解决办法，但不幸的是，什么也没有起作用。
我在屏幕上呈现5张桌子。使用GET调用获取表数据。这些表是在没有问题的情况下呈现的，但是我无法在它们上实现分页。分页控件工作良好，但表数据未更新。我可以看到数组中的总元素，我可以用方向键移动，更改页面大小，但对表没有影响。这张桌子粘在五张唱片上。
这是我的.ts文件
@ViewChild(MatPaginator) paginatorLegal: MatPaginator;
@ViewChild(MatPaginator) paginatorGSTN: MatPaginator;
@ViewChil
浏览 5提问于2022-02-10得票数 3
回答已采纳
在双向数据绑定中，如果用户决定取消当前编辑怎么办？在angular 2中如何实现这一点？
考虑下面这段代码：
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: `Name: {{ name }}<br>
<input *ngIf='editMode' type="text" [(ngModel)]='name' /><br>
&
浏览 1提问于2016-03-27得票数 12
我有一个网页，使用角和路由数据从一个TS文件。除(点击)外，一切正常。
如果我将带有(click)函数的SVG直接放在HTML中，它就能工作，但是如果我从TS文件中调用SVG，它就不起作用了。如果我删除(按一下)=linkOpen()，该链接将继续在一个新窗口中打开；如果我删除了target=iframe，该链接将在当前选项卡中打开。
project.component.html：
<div class="page" *ngIf="project$ | async as project">
<div [innerHTML
浏览 2提问于2019-01-11得票数 1
回答已采纳
1回答
在Angular 5中，有没有更好的解决方案？
<div *ngFor="let component of components | async">
<component-1 *ngIf="component.type === 'some-type-1'"></component-1>
<component-2 *ngIf="component.type === 'some-type-2'"></component-2>
<
浏览 2提问于2018-04-09得票数 1
2回答
我需要能够完全重新加载子组件。实现这一点的最好方法似乎是使用带有布尔值的简单*ngIf；设置为false以删除组件，然后设置为true以重新初始化它，即：
<app-child *ngIf="enabled"></app-child>
然而，仅仅这样做似乎不足以快速移除/重新初始化组件：
reloadTree(){
this.enabled = false;
this.enabled = true; // doesn't work- child ngOnInit isn't called
}
相反，在它工作之前，我必须使用setT
浏览 0提问于2017-11-26得票数 4
回答已采纳
2回答
我想知道，是否所有的异步事件和回调都可以通过包装一个区域中的所有组件逻辑(包括组件内的非组件指令的逻辑)来追溯到特定的源组件，那么假设所有的更改都遵循单向流，那么只需要检查该源组件以及任何具有来自源组件的更改输入的子组件的更改。
这是理解的声音吗？
此更改检测策略在Angular2中可用吗？
为什么Angular2在任何异步(XHR)事件之后检测所有组件上的更改？
浏览 2提问于2016-06-28得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
