タグ付けされた質問 「angular2-template」

Angularアプリケーションを作成していて、表示したいHTML応答があります。 それ、どうやったら出来るの？バインディング構文を使用するだけで、{{myVal}}すべてのHTML文字が（もちろん）エンコードされます。 どうにかしてinnerHTMLa divを変数値にバインドする必要があります。

840 angular  angular2-template  angular2-databinding 

Angular 2アプリで、ページを下にスクロールしてページの下部にあるリンクをクリックすると、ルートが変更されて次のページが表示されますが、ページの上部にスクロールしません。その結果、1ページ目が長く、2ページ目が少ない場合、2ページ目が不足しているような印象になります。コンテンツが表示されるのは、ユーザーがページの上部にスクロールした場合のみです。 コンポーネントのngInitでウィンドウをページの上部にスクロールできますが、アプリ内のすべてのルートを自動的に処理できるより良い解決策はありますか？

296 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」ネイティブ要素を介してアイテムを変更することです。その解決策は、非常に単純なことを行うには少し複雑に見えます。 もう1つの問題は、CSSをコンポーネントのスコープ外で定義する必要があるため、コンポーネントのカプセル化が壊れることです。 より簡単な解決策はありますか？<root [class]="..."> .... </ root>テンプレート内のようなもの。

190 angular  angular2-template 

Angular 2で動的フォームを実装しようとしています。動的フォームに削除やキャンセルなどの機能を追加しました。私はこのドキュメントに従いました：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 …

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

155 angular  angular2-template  primeng 

ng-container Angular 2のドキュメントで言及されていますが、それがどのように機能するか、そしてユースケースは何であるかについての説明はありません。 ngPluralとngSwitchディレクティブで特に言及されています。 DOESは<ng-container>同じことを行う<template>、またはそれは、ディレクティブがそれらのいずれかを使用するために書かれたかどうかによって決まり？ ある <ng-container *ngPluralCase="'=0'">there is nothing</ng-container> そして <template [ngPluralCase]="'=0'">there is nothing</template> 同じはず？ それらの1つをどのように選択しますか？ <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 Finalリリース（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配列の場合には機能しません。 更新： それはそのようで長さは？。|（非同期リスト$を）：私たちの長さを与えますが、コードの下に、まだ動作しません。 <div> Length: {{(list$ | async)?.length}} <div *ngIf="(list$ | async)?.length>0"> <ul> <li *ngFor="let item of (list$ | async)"> {{item.firstName}} </li> </ul> </div> </div> 誰でも私がObservable配列の長さをチェックする方法を教えてください。

108 angular  observable  angular2-template  angular2-services