实现折叠功能时出现此错误:
错误:模板解析错误:无法绑定到'target',因为它不是'div'的已知属性
app.component.html:
<div *ngFor = "let ele of elements; let RowIndex = index">
{{ele.name}}
<button data-toggle="collapse"
data-target="#demo{{RowIndex}}">Toggle
</button>
<div id="demo{{RowIndex}}" class="collapse">Lorem Ipsum</div>
</div>
Run Code Online (Sandbox Code Playgroud)
但如果我只是使用data-target="#demo",那就行得很好.但是,当我绑定{{RowIndex}}比它显示错误.
我正在使用Angular 7并面临一个问题=>登录后,API GET调用成功,组件也接收数据,但UI没有显示该数据.
当我打开浏览器控制台时,会立即在UI上填充数据并在控制台中显示警告.
"core.js:15686在Angular区域外触发导航,您是否忘记调用'ngZone.run()'?"
我已经搜索了这个警告并找到了一些解决方法,并在其中this.ngZone.run()调用我的API.
但问题是,我使用了40多个组件,并在每个组件中调用了这么多API.所以我必须调用ngZone.run()每个API调用,这似乎很难做到.
请建议我更好的方法来克服这个问题.提前致谢.
app.component.ts
getEmployees(): void {
this.employeeService.getEmployees().subscribe(e => {
this.employees = e;
});
}
Run Code Online (Sandbox Code Playgroud)
app.service.ts
@Injectable()
export class EmployeeService {
constructor(private httpClient: HttpClient) { }
getEmployees() {
return this.httpClient.get<EmployeeModel[]>('employees');
}
Run Code Online (Sandbox Code Playgroud) 我有一个电子邮件发送方案,其中有一个输入框'To'(您要发送消息的人).
app.html
<input type="text" class="form-control" [(ngModel)]="email.Tos">
Run Code Online (Sandbox Code Playgroud)
现在我希望当用户在逗号分隔的输入框中输入多个emailId时,那么在我的模型中,'Tos'值应该绑定在一个字符串数组中.喜欢:["abc @ gmail,com","xyz @ gmail.com"].
现在,请告诉我如何根据我的要求拆分输入框值.
我使用'routerLink'来导航我的路线,它工作正常.但是,当我再次点击同一个按钮时,我希望该组件将再次加载.但目前,它不适用于angular2.
app.component.html
<ul class="nav navbar-nav navbar-right">
<li><a [routerLink]="['/events']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">All Events</a></li>
<li><a [routerLink]="['/events/new']" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Create New</a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)
我想,当我一次又一次点击"所有事件"选项卡时,每次都会加载事件组件.
如何在angular2中实现这种情况?
angular2-forms angular2-directives angular2-template angular
我想实现一个功能(在Angular2中),即登录后,如果用户保持浏览器空闲30分钟,则应在30分钟后返回时将其注销。这只能由前端完成。
我正在使用Angular 2.4版的angular CLI
如何在Angular2应用程序中实现此功能?
angular2-directives angular2-template angular2-services angular
创建模型驱动的表单时,出现错误:错误:formControlName必须与父formGroup指令一起使用。您将要添加一个formGroup指令并将其传递给现有的FormGroup实例(您可以在类中创建一个)。
请告诉我这段代码出了什么问题。
app.component.html
<div class="col-md-6">
<form (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off">
<div class="form-group">
<label for="sessionName">Session Name:</label>
<input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." />
</div>
<div class="form-group">
<label for="abstract">Abstract:</label>
<textarea formControlName="abstract" id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
Run Code Online (Sandbox Code Playgroud)
app.component.ts
export class CreateSession {
newSessionForm:FormGroup;
abstract : FormControl;
name : FormControl;
ngOInInit(){
this.name = new FormControl('', Validators.required)
this.abstract = new FormControl('', Validators.required)
this.newSessionForm = new FormGroup({
name:this.name,
abstract: this.abstract
})
}
saveSession(formValues){
console.log(formValues);
}
Run Code Online (Sandbox Code Playgroud) angular2-forms angular2-directives angular2-template angular
我有2个父组件和1个子组件.我的项目结构如下:
app
-> app.module.ts
-> app.component.ts
-> app.routing.module.ts
parentComponent1
-> parent1.module.ts
-> parent1.component.ts
parentComponent2
-> parent2.module.ts
-> parent2.component.ts
childComponent
-> child.module.ts
-> child.component.ts
Run Code Online (Sandbox Code Playgroud)
现在我的问题是当我在parentComponent1和parentComponent2中使用子组件的选择器时:
<child-component [name]="parent1"></child-component>
Run Code Online (Sandbox Code Playgroud)
并将父组件中的子模块导入为:
parent1.module.ts--
@NgModule({
imports:[ChildModule],
declarations:[ChildComponent]
})
----
----
and so on....
Run Code Online (Sandbox Code Playgroud)
在parentComponent2的Moudle中也是如此:
parent2.module.ts--
@NgModule({
imports:[ChildModule],
declarations:[ChildComponent]
})
----
----
and so on....
Run Code Online (Sandbox Code Playgroud)
现在当我启动我的项目时,我的默认路由转到parentComponent1并且控制台中没有错误并且它工作正常,但是当我转到parentComponent2时,错误在控制台中出现:
未处理的Promise拒绝:输入2个模块声明的ChildComponent部分:Parent1Module和Parent2Module!请考虑将ChildComponent移动到导入Parent1Module和Parent2Module的更高模块.您还可以创建一个新的NgModule,它导出并包含ChildComponent,然后在Parent1Module和Parent2Module中导入NgModule
.
请帮我解决我在这里做错了什么.