คำถามติดแท็ก angular2-template

ฉันกำลังเขียนแอปพลิเคชันเชิงมุมและฉันมีการตอบสนอง HTML ที่ฉันต้องการแสดง ฉันจะทำอย่างไร ถ้าฉันเพียงใช้ไวยากรณ์การผูกพัน{{myVal}}มันเข้ารหัสอักขระ HTML ทั้งหมด (แน่นอน) ฉันต้องการอย่างใดอย่างหนึ่งที่จะผูกinnerHTMLของdivกับค่าตัวแปร

840 angular  angular2-template  angular2-databinding 

ในแอพ Angular 2 ของฉันเมื่อฉันเลื่อนหน้าลงและคลิกลิงก์ที่ด้านล่างของหน้ามันจะเปลี่ยนเส้นทางและพาฉันไปหน้าถัดไป แต่มันจะไม่เลื่อนไปที่ด้านบนของหน้า ดังนั้นหากหน้าแรกมีความยาวและหน้าที่ 2 มีเนื้อหาเพียงเล็กน้อยก็จะสร้างความประทับใจว่าหน้า 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>ในเทมเพลต

190 angular  angular2-template 

ฉันกำลังพยายามใช้ Dynamic Forms ใน Angular 2 ฉันได้เพิ่มฟังก์ชั่นเพิ่มเติมเช่น Delete และ Cancel ไปยังแบบฟอร์มไดนามิก ฉันได้ทำตามเอกสารนี้: 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 …

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คำสั่ง ไม่<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 Final release (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>

130 angular  angular2-template 

มีวิธีที่ฉันสามารถจำกัดความยาวของสตริงเป็นอักขระตัวเลขได้หรือไม่? สำหรับเช่น: ฉันต้อง จำกัด มีความยาวถึง {{ data.title }}20 มีท่อหรือตัวกรองจำกัดความยาวหรือไม่?

126 angular  angular2-template 

เราสามารถใช้ enums ในเทมเพลตมุมมอง 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); }; } แต่จะผ่านการกำหนดค่า enum ได้อย่างไร? ฉันต้องการสิ่งนี้ในเทมเพลต: <div class="Dropdown" dropdownType="DropdownType.instrument"></div> แนวทางปฏิบัติที่ดีที่สุดคืออะไร? แก้ไข: สร้างตัวอย่าง: import {bootstrap} from 'angular2/platform/browser'; import {Component, View, …

123 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 …

114 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 ของฉันฉันมีอาร์เรย์ที่สังเกตได้ 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 array อัปเดต: ดูเหมือนว่า(list $ | async) ?. lengthทำให้เรามีความยาว แต่โค้ดด้านล่างยังใช้ไม่ได้: <div> Length: {{(list$ | async)?.length}} <div *ngIf="(list$ | async)?.length>0"> <ul> <li *ngFor="let …

109 angular  observable  angular2-template  angular2-services