angular6 相关问题

角6 ngtemplateoutlet 我有以下组件： @成分（{ 选择器：'todo-lib'， 模板：`

我有以下组件： @Component({ selector: 'todo-lib', template: ` <li *ngFor="let todo of libService.todos"> <div class="view"> <label>{{todo.title}}</label> <ng-container *ngTemplateOutlet="incomingTemplate;context:ctx"></ng-container> </div> </li> <ng-template #incomingTemplate let-service="templateService"> <button (click)="service.removeTodo(todo)">delete</button> </ng-template> `, styles: [] }) export class TodoLibComponent implements OnInit { ctx = { templateService: this.libService }; 啤酒列表在libservice内部。我不会在这里发布它，因为它的逻辑无关紧要。 “ ng-template”将从另一个组件中注入，并将删除按钮添加到我的TODO列表中。这意味着：通常没有删除选项，除了提供“ NG-Template”之外 ，但是，此方法将因以下错误而失败：message: "_v.context.todo is undefined" 对于“ todo”不是上下文对象'ctx'的一部分，我无法访问它。为了实现这一目标，我将被迫这样做： <ng-container *ngTemplateOutlet="incomingTemplate;context:{ todo: todo}"> 这会让我访问待办事项，但再也无法访问服务。 似乎我无法访问NGFOR定义的“ todo”属性以及同时在“ CTX”属性中定义的服务。是否有解决方案可以实现两者？ 我还提到，在Angular的官方GitHub存储库中。开发人员的正确答案是： @dawidgarus： 您可以做： <ng-container *ngTemplateOutlet="incomingTemplate;context:{ todo: todo, templateService: libService }"> 中添加@pkozlowski-opensource： @dawidgarus建议是一个很好的建议，并遵循范围的工作方式 当前的角 - 我认为我们不想重新访问它。唯一的事情 我建议使用<ng-template>元素而不是 <ng-container>由于它生成较少的代码，因此并不需要创建不必要的代码 DOM等评论节点： <ng-template [ngTemplateOutlet]="incomingTemplate" [ngTemplateOutletContext]="{ todo: todo, templateService: libService }“> 我使用了ng-template而不是ng-container。 the的样子就像通过函数和变量更容易。 <ng-template #incomingTemplate let-service="templateService"> <button (click)="service">delete</button> </ng-template> 然后 <ng-container *ngTemplateOutlet="incomingTemplate; context:removeTodo(todo)"></ng-container>

将renderer3向后与Angular 5兼容？ 有人知道，如果Angular6中的Renderer3与Angular5兼容？在我们的库中，我们使用Renderer2，我们想知道Renderer3是否会向后与Angul兼容...

angular6- ngx编辑图标未出现在生产上

用彩色图标创建热图，没有图标在传单上或任何支持卫星和物理视图的地图上 我正在使用Angular 6和FelleT 1.4.7合作以两种方式实现热图特征： 1.彩色图标的热图 我想将彩色图标放在指定的纬度和经度 坐标...

1。带有彩色图标的热图

如何从 Angular 组件中删除 index.html 中的脚本标签

上面是我的示例脚本标签...

模块没有导出成员“http”[2305]

您好，我正在尝试从 '@angular/common/http' 导入 http 调用，但收到错误消息，表明模块没有导出成员 'http' 错误：[ts] 模块 '"e:/car/node_modules/@angular/common/htt...

如何在 Angular 6 中手动更改选项卡？

我的申请表中有注册表。在该表单中，我使用两个选项卡，一个用于个人详细信息表单，另一个用于 OTP 验证表单。 填写个人详细信息后...

验证角度中的特殊字符

ngOnInit（）：无效{ this.customerForm = this.fb.group({ 名称：[''，验证器.required]， customer_id: ['', Validators.required], }) } 我有这个有角度的表格组。所以这个...

在 Angular 6 中扩展原生 HTML 元素

我最近创建了一个本机 Web 组件，它在所有浏览器中运行良好。我将此 Web 组件移至 Angular 6 应用程序中，一切都按预期工作。然后我尝试延长...

需要在 Angular 6 中找到最佳日期和时间选择器

我有一个具有此配置的角度项目。 角度 CLI：6.0.3 节点：10.16.3 操作系统：Linux x64 角度：6.0.2 ...动画、常见、编译器、编译器-cli、核心、表单 ... http、语言服务...

如何检查文本区域是否获得焦点？

我无法检查文本区域是否聚焦。我将尝试使用以下代码，但它不起作用。 const msg_area = document.getElementById('msg-area') as HTMLInputElement; if (msg-area.hasFocus()...

通过使用角度路由未选择默认路由

我使用 routerLinkActive 作为选择的默认路由，同时我还显示了图像。初始加载图像不会出现。通过更改选项卡，图像可以正确显示。 下面是我的...

响应到来后数组未更新

我已经预定义了对象数组，我将通过执行一些操作来更新它们。我正在使用材质对话框在角度材质模态上显示数组 我正在传递我的arra...

运行 npm install 命令时出现意外的 JSON 输入错误结束。此问题有解决办法吗？

我一直在尝试运行 npm install 来更新我的节点模块，但不能！，类似的解决方案都不适合我。 这是我收到的错误：

获取选择单选 Angular 6 的默认值

我有这个映射用户*------------------------1 职业。 我想修改一个用户。 因此，我从 list-users.component.html 中选择一个，我将被重定向到modify-user.component.html。 是...

如何在 Angular 6+ 中更改 mat-paginator 中的 itemsPerPageLabel

我正在使用 Angular 6.0.3 和 Angular Material 7.1.0，我的分页器位于单独的组件中（不是 app.component）。到目前为止我已经尝试过： 创建了名为 myPagni 的单独 ts 文件...

通过在模板内使用吸气剂触发角度变化检测循环

似乎在模板内使用 getter 会导致 Angular 变化检测进入循环（getter 被调用数百次）。在阅读了大量类似问题后，我似乎无法......

Angular 6 中的链接 HttpClient 调用

我想我已经阅读了 100 多篇关于该主题的文章，但我仍然无法弄清楚如何在 Angular 6 中使用 rxjs 链接两个 HttpClient 调用。 假设我有一个具有该签名的服务： 地理服务{

无法读取未定义的属性“setParent”

我正在使用 Angular 6 反应形式，并且我在子组件中有一个表： 我正在使用 Angular 6 反应形式，并且我在子组件中有一个表格： <div formArrayName="_server"> <table id="_server" class="table table-striped table-bordered"> <thead> <tr> <th>Host name</th> <th>IP</th> <th>Domain</th> <th>OS</th> <th>Action</th> </tr> </thead> <tbody> <tr *ngFor="let server of serverForms.controls; let i=index" [formGroupName]="i"> <td> <input formControlName="HostName" class="form-control" type="text" /> </td> <td> <input formControlName="IPAddress" class="form-control" type="text" /> </td> <td> <input formControlName="Domain" class="form-control" type="text" /> </td> <td> <input formControlName="OS" class="form-control" type="text" /> </td> <td class="buttonCenter"> <button mat-raised-button color="primary" class="deleteFieldButton" (click)="deleteServer(i)" type="button">delete</button> </td> </tr> </tbody> <button mat-raised-button color="primary" class="addFieldButton" (click)="addServer()" type="button">Add new server</button> </table> 我正在将表格从家长处传递给孩子。 在ts文件中可以看到： childForm; constructor(private parentF: FormGroupDirective) { } ngOnInit() { this.childForm = this.parentF.form; this.childForm.get('_server') as FormArray; } get serverForms() { return this.childForm.get('_server') as FormArray } addServer() { const server = this.childForm.addControl('_server', new FormGroup({ HostName: new FormControl([]), IPAddress: new FormControl([]), Domain: new FormControl([]), OS: new FormControl([]), })) this.serverForms.push(server); } deleteServer(i) { this.serverForms.removeAt(i) } deleteServer 方法运行良好，但 addServer() 不起作用 - 我收到错误：无法读取未定义的属性“setParent”。 请指教！ 谢谢！ 试试这个，它有效 parent.component.ts import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormArray, FormBuilder } from '@angular/forms'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { name = 'Angular'; form; constructor() { this.form = new FormGroup({ arr: this.buildArray() }) } ngOnInit() { console.log(this.form.get('arr').value); } get arr() { return this.form.get('arr').value; } buildGroup() { return new FormGroup({ HostName: new FormControl([]), IPAddress: new FormControl([]), Domain: new FormControl([]), OS: new FormControl([]), }) } buildArray() { return new FormArray([this.buildGroup()]) } deleteServer(i) { this.form.get('arr').removeAt(i) } trackByFn(index: any, item: any) { return index; } } child.component.ts import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormArray, ControlContainer, FormGroupDirective } from '@angular/forms'; @Component({ selector: 'app-table', templateUrl: './table.component.html', styleUrls: ['./table.component.css'], viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] }) export class TableComponent implements OnInit { childForm; constructor(private parentF: FormGroupDirective) { } ngOnInit() { this.childForm = this.parentF.form; this.childForm.get('_server') as FormArray; } get serverForms() { return this.childForm.get('arr') as FormArray } add() { this.childForm.get('arr').push(this.buildGroup()); } buildGroup() { return new FormGroup({ HostName: new FormControl(''), IPAddress: new FormControl(''), Domain: new FormControl(''), OS: new FormControl(''), }) } } 示例：https://stackblitz.com/edit/angular-kin9jq 我在不使用 FormGroupDirective 的情况下做 FormArray 考虑这样 组件 childForm: FormArray; constructor() { this.childForm = new FormArray([]); } addServer() { this.childForm.push(new FormGroup({ HostName: new FormControl(), IPAddress: new FormControl(), Domain: new FormControl(), OS: new FormControl(), })); } deleteServer(i) { this.childForm.removeAt(i) } 这就是我在模板中所做的更改 <div formArrayGroup="childForm"> NGFor <tr *ngFor="let frm of childForm.controls; let i=index" [formGroup]="frm"> stackblitz 演示 👌

Angular 6 服务：提供：“root”与 CoreModule

在 Angular 6 中，以下是创建单例服务的首选方法： 从 '@angular/core' 导入 { Injectable } ； @Injectable({ 提供于： 'root', }) 导出类 UserService { } 来自安古...