Questions tagged «angular2-template»

我正在编写Angular应用程序，并且要显示HTML响应。 我怎么做？如果我仅使用绑定语法，{{myVal}}那么它将编码所有HTML字符（当然）。 我需要以某种方式结合innerHTML的div对变量的值。

838 angular  angular2-template  angular2-databinding 

在我的Angular 2应用程序中，当我向下滚动页面并单击页面底部的链接时，它确实会更改路线并带我进入下一页，但不会滚动到页面顶部。结果，如果第一页很长而第二页的内容很少，则给人的印象是第二页缺少内容。由于仅当用户滚动到页面顶部时内容才可见。 我可以将窗口滚动到该组件的ngInit中的页面顶部，但是，有没有更好的解决方案可以自动处理应用程序中的所有路由？

295 angular  typescript  angular2-routing  angular2-template  angular2-directives 

我正在尝试显示一个勾号，如果答案是可接受的答案： template: `<div ngIf="answer.accepted">✔</div>` 但是我得到这个错误： EXCEPTION: No provider for TemplateRef! (NgIf ->TemplateRef) 我究竟做错了什么？

247 angular  angular2-template 

当我尝试使用data attribute我的template，就像这样： <ol class="viewer-nav"> <li *ngFor="#section of sections" data-value="{{ section.value }}"> {{ section.text }} </li> </ol> Angular 2 崩溃： 例外：模板解析错误：由于它不是已知的本机属性，因此无法绑定到“ sectionvalue”（“ ] data-sectionvalue =“ {{section.value}}”> {{section.text}} 我显然缺少语法，请帮忙。

229 angular  angular2-template 

我不知道如何添加到我的组件 <component></component> html（component.html）内动态类属性。 我发现的唯一解决方案是通过“ ElementRef”本机元素修改项目。该解决方案似乎做起来应该很简单，有点复杂。 另一个问题是必须在组件范围之外定义CSS，这会破坏组件封装。 有没有更简单的解决方案？像<root [class]="..."> .... </ root>模板里面的东西。

187 angular  angular2-template 

我试图在Angular 2中实现动态表单。我向动态表单添加了其他功能，例如删除和取消。我已遵循此文档：https : //angular.io/docs/ts/latest/cookbook/dynamic-form.html 我对代码进行了一些更改。我在这里出错。 我如何使此错误消失？ 您可以在此处找到完整的代码：http : //plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview，它可以在插件中使用，但不能在我的本地系统中使用。 HTML代码： <div> <form [formGroup]="form"> <div *ngFor="let question of questions" class="form-row"> <label [attr.for]="question.key">{{question.label}}</label> <div [ngSwitch]="question.controlType"> <input *ngSwitchCase="'textbox'" [formControlName]="question.key" [id]="question.key" [type]="question.type" [(ngModel)]="question.value"> <select [id]="question.key" [(ngModel)]="question.value" *ngSwitchCase="'dropdown'" [formControlName]="question.key" > <option *ngFor="let opt of question.options" [ngValue]="opt.key" >{{opt.value}}</option> </select> <input *ngSwitchCase="'checkbox'" [(ngModel)]="question.value" [id]="question.key" [type]="question.type" (change)="question.value = …

178 forms  angular  angular2-template  angular2-forms 

我在Angular 2模板中遇到了一种奇怪的赋值语法。 <template let-col let-car="rowData" pTemplate="body"> <span [style.color]="car[col.field]">{{car[col.field]}}</span> </template> 看来，let-col和let-car="rowData"创建两个新的变量col和car，然后可以绑定到模板中。 资料来源：https : //www.primefaces.org/primeng/#/datatable/templating 这个神奇的let-*语法叫什么？ 它是如何工作的？ let-something和之间有什么区别let-something="something else"？

154 angular  angular2-template  primeng 

ng-container 在Angular 2文档中提到过，但没有解释它如何工作以及用例是什么。 在ngPlural和ngSwitch指令中特别提到了它。 是否与<ng-container>做相同的事情<template>，还是取决于是否编写了使用其中一个指令的指令？ 是 <ng-container *ngPluralCase="'=0'">there is nothing</ng-container> 和 <template [ngPluralCase]="'=0'">there is nothing</template> 应该是一样的吗？ 我们如何选择其中之一？ 如何<ng-container>在自定义指令中使用？

150 angular  typescript  angular2-template 

如果private在组件类上声明了变量，我是否应该能够在该组件的模板中访问它？ @Component({ selector: 'my-app', template: ` <div> <h2>{{title}}</h2> <h2>Hello {{userName}}</h2> // I am getting this name </div> `, }) export class App { public title = 'Angular 2'; private userName = "Test Name"; //declared as private }

143 typescript  angular  angular2-template 

我正在使用Angular2最终版本（2.1.0）。当我想显示公司列表时，出现此错误。 在file.component.ts： public companies: any[] = [ { "id": 0, "name": "Available" }, { "id": 1, "name": "Ready" }, { "id": 2, "name": "Started" } ]; 在file.component.html： <tbody> <tr *ngFor="let item of companies; let i =index"> <td>{{i}}</td> <td>{{item.name}}</td> </tr> </tbody>

128 angular  angular2-template 

有没有一种方法可以将字符串的长度限制为数字字符？例如：我必须将标题长度限制为20 {{ data.title }}。 是否有任何管道或过滤器限制长度？

126 angular  angular2-template 

我们可以在angular2视图模板中使用枚举吗？ <div class="Dropdown" dropdownType="instrument"></div> 传递字符串作为输入： enum DropdownType { instrument, account, currency } @Component({ selector: '[.Dropdown]', }) export class Dropdown { @Input() public set dropdownType(value: any) { console.log(value); }; } 但是如何通过枚举配置呢？我想要在模板中这样的东西： <div class="Dropdown" dropdownType="DropdownType.instrument"></div> 最佳做法是什么？ 编辑：创建了一个示例： import {bootstrap} from 'angular2/platform/browser'; import {Component, View, Input} from 'angular2/core'; export enum DropdownType { instrument …

122 enums  angular  angular2-template 

在这种情况下，我使用ngFor以下命令在视图中显示学生列表（数组）： <li *ngFor="#student of students">{{student.name}}</li> 每当我将其他学生添加到列表中时，它都会更新，这真是太好了。 然而，当我给它一个pipe到filter由学生的名字， <li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li> 在我过滤学生姓名字段中输入内容之前，它不会更新列表。 这里是plnkr的链接。 Hello_world.html <h1>Students:</h1> <label for="newStudentName"></label> <input type="text" name="newStudentName" placeholder="newStudentName" #newStudentElem> <button (click)="addNewStudent(newStudentElem.value)">Add New Student</button> <br> <input type="text" placeholder="Search" #queryElem (keyup)="0"> <ul> <li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li> </ul> sort_by_name_pipe.ts import {Pipe} from 'angular2/core'; @Pipe({ …

113 angular  angular2-template  angular2-directives  angular-pipe 

我知道在angular2中，我可以禁用具有[disable]属性的按钮 ，例如： <button [disabled]="!isValid" (click)="onConfirm()">Confirm</button> 但是我可以使用[ngClass]或做[ngStyle]吗？像这样： <button [ngStyle]="{disabled : !isValid}" (click)="onConfirm()">Confirm</button> 谢谢。

113 html  angular  angular2-template  angular2-forms 

在我的Angular 2组件中，我有一个Observable数组 list$: Observable<any[]>; 在我的模板中 <div *ngIf="list$.length==0">No records found.</div> <div *ngIf="list$.length>0"> <ul> <li *ngFor="let item of list$ | async">item.name</li> </ul> </div> 但是list $ .length在Observable数组中不起作用。 更新： 似乎（list $ | async）?. length给了我们长度，但是下面的代码仍然不起作用： <div> Length: {{(list$ | async)?.length}} <div *ngIf="(list$ | async)?.length>0"> <ul> <li *ngFor="let item of (list$ | async)"> {{item.firstName}} </li> </ul> …

109 angular  observable  angular2-template  angular2-services