标签: angular2-template

我正在写一个Angular应用程序,{{myVal}}我想要显示一个响应.

我怎么做？如果我只是使用绑定语法,innerHTML它会编码所有div字符(当然).

我需要以某种方式将a的内部html绑定{{myVal}}到变量值.

在我的Angular 2应用程序中,当我向下滚动页面并单击页面底部的链接时,它确实会更改路径并将我带到下一页但它不会滚动到页面顶部.结果,如果第一页很长而第二页的内容很少,则给人的印象是第二页缺少内容.由于只有当用户滚动到页面顶部时内容才可见.

我可以在组件的ngInit中将窗口滚动到页面顶部但是,有没有更好的解决方案可以自动处理我的应用程序中的所有路径？

如果答案是可接受的答案,我试图显示一个复选标记:

template: `<div ngIf="answer.accepted">&#10004;</div>`

但我得到这个错误:

EXCEPTION: No provider for TemplateRef! (NgIf ->TemplateRef)

我究竟做错了什么？

我觉得我错过了什么.当我尝试data attribute在我的中使用时template,像这样:

<ol class="viewer-nav">
    <li *ngFor="#section of sections" data-value="{{ section.value }}">
        {{ section.text }}
    </li>
</ol>

Angular 2 崩溃:

EXCEPTION:模板解析错误:无法绑定到"sectionvalue",因为它不是已知的本机属性("

] data-sectionvalue ="{{section.value}}"> {{section.text}}

我显然遗漏了一些语法,请帮忙.

我正在尝试在Angular 2中实现Dynamic Forms.我在动态表单中添加了删除和取消等附加功能.我已按照此文档:https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

我对代码做了一些更改.我在这里得到错误.

我该怎么做这个错误？

你可以找到完整的代码在这里:http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview,这是在plunker但不是在我的本地系统的工作.

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 = ck.checked" #ck [ngModelOptions]="{standalone: true}">

  </div> 
  <div class="errorMessage" *ngIf="!form.controls[question.key].valid">{{question.label}} is required</div>
    </div>

    <div class="form-row">
      <button type="submit" [disabled]="!form.valid" (click)="onSubmit()">Save</button>
      <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
      <button type="button" class="btn btn-default" (click)="clear()">Clear</button>

    </div> …

我不知道如何向我的组件添加<component></component>动态类属性,但在模板html(component.html)中.

我找到的唯一解决方案是通过"ElementRef"原生元素修改项目.做一些非常简单的事情似乎有点复杂.

另一个问题是必须在组件范围之外定义CSS,从而破坏组件封装.

有更简单的解决方案吗？像<root [class]="..."> .... </ root>模板里面的东西.

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>在custom指令中使用？

如果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
}

我在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"？

可以使用let-col而不是在let-car="rowData"不更改最终DOM结构的情况下重写上述代码吗？

在这种情况下,我正在向视图中显示学生列表(数组)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({
    name: 'sortByName'
})
export class SortByNamePipe {

    transform(value, [queryString]) {
        // console.log(value, queryString);
        return value.filter((student) => new RegExp(queryString).test(student.name))
        // return value;
    } …