Questions tagged «angular»

我有一个包含表单的模式，当模式被销毁时，我在控制台中收到以下错误： 由于未连接表单，因此取消了表单提交 模态被添加到一个<modal-placeholder>元素，该元素是<app-root>我的顶级元素的直接子元素。 从DOM中删除表单并摆脱Angular 2中的此错误的正确方法是什么？我目前使用componentRef.destroy();

82 javascript  html  angular  forms  angular-forms 

我有一个组件，它接收image对象数组作为Input数据。 export class ImageGalleryComponent { @Input() images: Image[]; selectedImage: Image; } 我想在组件加载时将selectedImage值设置为images数组的第一个对象。我试图在OnInit生命周期挂钩中执行以下操作： export class ImageGalleryComponent implements OnInit { @Input() images: Image[]; selectedImage: Image; ngOnInit() { this.selectedImage = this.images[0]; } } 这给我一个错误Cannot read property '0' of undefined，这意味着images该阶段未设置该值。我也尝试过OnChanges钩子，但由于无法获取有关如何观察数组变化的信息而感到困惑。如何获得预期的结果？ 父组件如下所示： @Component({ selector: 'profile-detail', templateUrl: '...', styleUrls: [...], directives: [ImageGalleryComponent] }) export class ProfileDetailComponent …

82 javascript  angular  typescript 

我有一个带有排序标题的普通Angular Material 2 DataTable。各种各样的头工作正常。除了以对象为值的对象。这些根本不排序。 例如： <!-- Project Column - This should sort!--> <ng-container matColumnDef="project.name"> <mat-header-cell *matHeaderCellDef mat-sort-header> Project Name </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.project.name}} </mat-cell> </ng-container> 注意 element.project.name 这是displayColumn配置： displayedColumns = ['project.name', 'position', 'name', 'test', 'symbol']; 更改'project.name'为'project'无效或"project['name']" 我想念什么？这有可能吗？ 这是一个Stackblitz： Angular Material2 DataTable排序对象 编辑： 感谢您的所有答案。我已经可以使用动态数据了。因此，我不必为每个新的嵌套属性添加switch语句。 这是我的解决方案：（无需创建扩展MatTableDataSource的新数据源） export class NestedObjectsDataSource extends MatTableDataSource<MyObjectType> …

82 angular  angular-material2 

我无法找出如何将所有表单字段都标记为已触摸。主要问题是，如果我不触摸字段并尝试提交表单-验证错误未显示。我的控制器中有这段代码的占位符。 我的想法很简单： 用户点击提交按钮 所有字段都标记为已触摸 错误格式化程序重新运行并显示验证错误 如果有人有其他想法如何在提交时显示错误而不执行新方法，请与他人分享。谢谢！ 我的简化形式： <form class="form-horizontal" [formGroup]="form" (ngSubmit)="onSubmit(form.value)"> <input type="text" id="title" class="form-control" formControlName="title"> <span class="help-block" *ngIf="formErrors.title">{{ formErrors.title }}</span> <button>Submit</button> </form> 而我的控制器： import {Component, OnInit} from '@angular/core'; import {FormGroup, FormBuilder, Validators} from '@angular/forms'; @Component({ selector : 'pastebin-root', templateUrl: './app.component.html', styleUrls : ['./app.component.css'] }) export class AppComponent implements OnInit …

82 angular  angular-reactive-forms  angular2-forms  angular2-formbuilder 

我正在尝试从类中绑定一个颜色属性（通过属性绑定来获取）以设置background-colormy div。 import {Component, Template} from 'angular2/angular2'; @Component({ selector: 'circle', bind:{ "color":"color" } }) @Template({ url: System.baseURL + "/components/circle/template.html", }) export class Circle { constructor(){ } changeBackground():string{ return "background-color:" + this.color + ";"; } } 我的模板： <style> .circle{ width:50px; height: 50px; background-color: lightgreen; border-radius: 25px; } </style> <div class="circle" [style]="changeBackground()"> …

82 angular 

我是Angular 2和TypeScript的新手，我正在尝试遵循最佳实践。 我没有使用简单的JavaScript模型（{}），而是尝试创建TypeScript类。 但是，Angular 2似乎不喜欢它。 我的代码是： import { Component, Input } from "@angular/core"; @Component({ selector: "testWidget", template: "<div>This is a test and {{model.param1}} is my param.</div>" }) export class testWidget { constructor(private model: Model) {} } class Model { param1: string; } 我将其用作： import { testWidget} from "lib/testWidget"; @Component({ selector: …

82 class  typescript  angular 

释放Enter键时，以下内容非常有用。除了，还有哪些其他选项可用？keyupkeyup.enter <input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>

82 javascript  html  onkeyup  angular 

我正在尝试使用Angular2路由器防护来限制对我的应用程序中某些页面的访问。我正在使用Firebase身份验证。为了检查用户是否与火力地堡登录，我得叫.subscribe()上FirebaseAuth同一个回调对象。这是警卫的代码： import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { AngularFireAuth } from "angularfire2/angularfire2"; import { Injectable } from "@angular/core"; import { Observable } from "rxjs/Rx"; @Injectable() export class AuthGuard implements CanActivate { constructor(private auth: AngularFireAuth, private router: Router) {} canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>|boolean { this.auth.subscribe((auth) => { if (auth) …

82 typescript  angular  angular2-routing 

在Angular文档中，有一个关于侦听父母的孩子事件的主题。没关系。但是我的目的是相反的！在我的应用程序中，有一个“ admin.component”保存着管理页面的布局视图（侧边栏菜单，任务栏，状态等）。在此父组件中，我配置了路由器系统以在管理员的其他页面之间更改主视图。问题是要在更改后保存内容，用户单击任务栏上的“保存”按钮（位于admin.component中），并且子组件必须侦听该click事件以执行保存人员。

81 javascript  typescript  angular  rxjs  eventemitter 

我试图以编程方式在元素上触发click事件（或任何其他事件），换句话说，我想知道与angular2中jQuery .trigger（）方法提供的功能相似。 有内置的方法可以做到这一点吗？.....如果没有，请建议我该怎么做 考虑以下代码片段 <form [ngFormModel]="imgUploadFrm" (ngSubmit)="onSubmit(imgUploadFrm)"> <br> <div class="input-field"> <input type="file" id="imgFile" (click)="onChange($event)" > </div> <button id="btnAdd" type="submit" (click)="showImageBrowseDlg()" )>Add Picture</button> </form> 在这里，当用户单击btnAdd时，它将触发imgFile上的click事件

81 angular  angular2-forms 

同一模板中可以有多个路由器出口吗？ 如果是，那么如何配置路由？ 我正在使用angular2 beta。

81 angular  angular2-routing  angular2-template 

我已经将项目升级到Angular 6，除了转换为 .angular-cli.json文件。在我遵循的指南中，据说它将自动进行转换。 npm install -g @ angular / cli npm安装@ angular / cli ng update @ angular / cli 但是，情况并非如此，因为我还有旧的 .angular-cli.json 有没有办法自动/手动？

81 angular 

我一直在四处寻找Angular Cookie，但找不到如何在Angular中实现Cookie管理。有什么方法可以管理cookie（例如AngularJS中的$ cookie）吗？

81 javascript  angular  typescript 

我知道我可以使用以下方式获取表单的值 JSON.stringify（this.formName.value）但是，我想从表单中获取单个值。 我该怎么做呢？

81 angular  typescript 

我有一个angular 5组件，需要在新选项卡中打开链接，我尝试了以下操作： <a href="www.example.com" target="_blank">page link</a> 当我打开链接时，应用程序变慢并打开如下路径： localhost:4200/www.example.com 我的问题是：正确地做到这一点的正确方法是什么？

81 html  angular  routes  anchor