小编Er *_*rma的帖子

无法绑定到'target',因为它不是'div'的已知属性

实现折叠功能时出现此错误:

错误:模板解析错误:无法绑定到'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}}比它显示错误.

collapse angular

43
推荐指数
2
解决办法
3万
查看次数

在Angular区域外触发导航,您是否忘记调用'ngZone.run()'?

我正在使用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)

zonejs angular angular-router

31
推荐指数
5
解决办法
2万
查看次数

如何以角度2分割字符串

我有一个电子邮件发送方案,其中有一个输入框'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"].

现在,请告诉我如何根据我的要求拆分输入框值.

angular2-forms angular2-template

9
推荐指数
1
解决办法
4万
查看次数

角度2:在同一路线上重定向时再次重新加载相同的组件

我使用'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

6
推荐指数
2
解决办法
2万
查看次数

几分钟后在Angular 2中自动注销

我想实现一个功能(在Angular2中),即登录后,如果用户保持浏览器空闲30分钟,则应在30分钟后返回时将其注销。这只能由前端完成。

我正在使用Angular 2.4版的angular CLI

如何在Angular2应用程序中实现此功能?

angular2-directives angular2-template angular2-services angular

5
推荐指数
3
解决办法
1万
查看次数

formControlName必须与父formGroup指令一起使用

创建模型驱动的表单时,出现错误:错误: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
解决办法
8684
查看次数

Angular 2:Type ChildComponent是2个模块声明的一部分:parent1Module和Parent2Module

我有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

.

请帮我解决我在这里做错了什么.

angular

0
推荐指数
1
解决办法
2587
查看次数