Questions tagged «angular»

我正在使用Material 2添加md-raised-button。我只想在某些条件为真时才应用此指令。 例如： <button md-raised-button="true"></button> 另一个例子：我在plunker中创建了一个基本的动态反应形式。我正在使用formArrayName反应形式的指令用于控件数组。我只想formArrayName在特定条件为真时应用指令，否则不要添加formArrayName指令。 这是一个矮胖的链接。

109 angular  angular-material  angular2-forms  angular2-directives  angular-material2 

我是angular 5的新手，并尝试迭代包含打字稿中另一张地图的地图。下面的角度如何在这种映射下进行迭代是组件的代码： import { Component, OnInit} from '@angular/core'; @Component({ selector: 'app-map', templateUrl: './map.component.html', styleUrls: ['./map.component.css'] }) export class MapComponent implements OnInit { map = new Map<String, Map<String,String>>(); map1 = new Map<String, String>(); constructor() { } ngOnInit() { this.map1.set("sss","sss"); this.map1.set("aaa","sss"); this.map1.set("sass","sss"); this.map1.set("xxx","sss"); this.map1.set("ss","sss"); this.map1.forEach((value: string, key: string) => { console.log(key, value); …

109 javascript  angular  typescript  angular-cli 

我有几个仅输出失败的测试[object ErrorEvent] thrown。我在控制台中看不到任何可帮助我确定问题代码的内容。我需要做些什么来追踪这些吗？ [编辑]：我正在运行Karma v1.70，Jasmine v2.7.0

108 angular  angular-cli  karma-jasmine 

假设我有一个Angular2组件 //home.component.ts import { Component } from 'angular2/core'; @Component({ selector: "home", templateUrl: "app/components/templates/home.component.html", styleUrls: ["app/components/styles/home.component.css"] }) export class HomeComponent { public width: Number; public height: Number; } 该组件的模板html文件 //home.component.html <div class="home-component">Some stuff in this div</div> 最后是此组件的css文件 //home.component.css .home-component{ background-color: red; width: 50px; height: 50px; } 正如你可以看到有在2个属性width和height。我希望宽度和高度的css样式与width和height属性的值匹配，并且当属性更新时，div的宽度和高度也会更新。完成此操作的正确方法是什么？

108 css  angular 

管道是用于转换模板中数据（格式）的过滤器。 我遇到了pipe()如下功能。pipe()在这种情况下，此功能究竟意味着什么？ return this.http.get<Hero>(url) .pipe( tap(_ => this.log(`fetched hero id=${id}`)), catchError(this.handleError<Hero>(`getHero id=${id}`)) );

108 angular  rxjs  angular-pipe  rxjs-pipe 

我有一个mat-select，其中选项是数组中定义的所有对象。我正在尝试将值默认设置为选项之一，但是在页面呈现时仍处于选中状态。 我的打字稿文件包含： public options2 = [ {"id": 1, "name": "a"}, {"id": 2, "name": "b"} ] public selected2 = this.options2[1].id; 我的HTML文件包含： <div> <mat-select [(value)]="selected2"> <mat-option *ngFor="let option of options2" value="{{ option.id }}"> {{ option.name }} </mat-option> </mat-select> </div> 我曾尝试设置selected2与value在mat-option给该对象和它的ID，并使用都不断地尝试[(value)]和[(ngModel)]在mat-select，但没有正常工作。 我正在使用材料版本2.0.0-beta.10

108 angular  typescript  angular-material2 

我的代码： <li *ngFor="let item of list; let i=index" class="dropdown-item" (click)="onClick(item)"> <template [ngIf]="i<11">{{item.text}}</template> </li> 我试图在任何时候仅显示10个列表元素。如此处答案所示，我使用了ngIf，但是这导致页面上显示空列表项（超过10）。

108 angular 

我想在Angular 2应用程序的组件模板中设置DIV的背景图像。但是，我在控制台中始终收到以下警告，但没有得到预期的效果...我不确定动态CSS背景图像是否由于Angular2中的安全限制而被阻止，或者我的HTML模板是否损坏。 这是我在控制台中看到的警告（我将img网址更改为/img/path/is/correct.png： 警告：清理不安全的样式值url（SafeValue必须使用[property] = binding：/img/path/is/correct.png（请参阅http://g.co/ng/security#xss））（请参阅http：// g.co/ng/security#xss）。 问题是我确实使用DomSanitizationServiceAngular2 清理了注入模板的内容。这是模板中的HTML： <div> <div> <div class="header" *ngIf="image" [style.background-image]="'url(' + image + ')'"> </div> <div class="zone"> <div> <div> <h1 [innerHTML]="header"></h1> </div> <div class="zone__content"> <p *ngFor="let contentSegment of content" [innerHTML]="contentSegment"></p> </div> </div> </div> </div> </div> 这是组件... Import { DomSanitizationService, SafeHtml, SafeUrl, SafeStyle } from '@angular/platform-browser'; …

107 typescript  angular  xss 

我可以在ngIf没有额外的容器元素的情况下使用吗？ <tr *ngFor="..."> <div *ngIf="..."> ... </div> <div *ngIf="!..."> ... </div> </tr> 它在表中不起作用，因为这会使HTML无效。

107 html  templates  angular 

<div> <input #ipt type="text"/> </div> 是否可以从组件类访问模板访问变量？ 也就是说，我可以在这里访问它吗， class XComponent{ somefunction(){ //Can I access #ipt here? } }

107 angular  typescript  angular2-template 

好吧，也许这还不清楚。获取此表格： <form (ngSubmit)="submit()" #crisisForm="ngForm"> <input type="text" name="name" [(ngModel)]="crisis.name"> <button type="submit">Submit</button> <button type="button" (click)="preview()">Preview</button> <button type="reset" (click)="reset()">Reset</button> </form> 为什么所有按钮都会触发该submit()功能？以及如何避免这种情况？

107 javascript  forms  angular  submit 

当我将Angular从7更新到Angular 8时，出现延迟加载模块错误 我尝试了角度升级指南中提供的选项 进行了以下更改： 之前 loadChildren: '../feature/path/sample- tage.module#SameTagModule' 后 loadChildren: () => import('../feature/path/sample- tags.module').then(m => m.CreateLinksModule) 错误TS1323：仅当'--module'标志为'commonjs'或'esNext'时，才支持动态导入。

107 javascript  angular  typescript  module  angular8 

我正在使用Angular 5使用前端应用程序，我需要隐藏搜索框，但是单击按钮时，搜索框应显示并聚焦。 我已经尝试使用指令或类似的方法在StackOverflow上找到一些方法，但无法成功。 这是示例代码： @Component({ selector: 'my-app', template: ` <div> <h2>Hello</h2> </div> <button (click) ="showSearch()">Show Search</button> <p></p> <form> <div > <input *ngIf="show" #search type="text" /> </div> </form> `, }) export class App implements AfterViewInit { @ViewChild('search') searchElement: ElementRef; show: false; name:string; constructor() { } showSearch(){ this.show = !this.show; this.searchElement.nativeElement.focus(); alert("focus"); …

107 angular  angular5  angular-forms 

我对Angular还是很陌生，所以我不确定这样做的最佳实践。 我使用了angular-cli并ng new some-project生成了一个新应用。 在它的“资产”文件夹中创建了一个“图像”文件夹，所以现在我的图像文件夹是 src/assets/images 在app.component.html（这是我的应用程序的根目录）中， <img class="img-responsive" src="assets/images/myimage.png"> 当我ng serve查看我的Web应用程序时，该图像不显示。 在Angular应用程序中加载图像的最佳实践是什么？ 编辑：请参阅下面的答案。我的实际图像名称使用的是Angular不喜欢的空格。当我删除文件名中的空格时，图像正确显示。

106 html  angular  angular-cli 

如何检测Angular中组件外部的点击？

106 html  events  angular  typescript