angular2-template

问题 I have read NgStyle Documentation For Angular 2, and it is a little bit confusing for me. How do I use NgStyle with condition like (if...else) to set background image of any element? 回答1: Using a ternary operator inside the ngStyle binding will function as an if/else condition. <div [ngStyle]="{'background-image': 'url(' + value ? image : otherImage + ')'}"></div> 回答2: One can also use this kind of condition: <div [ngStyle]="myBooleanVar && {'color': 'red'}"></div> It requires a bit less

问题 I have component for rendering SVG icon: import {Component, Directive} from 'angular2/core'; import {COMMON_DIRECTIVES} from 'angular2/common'; @Component({ selector: '[icon]', directives: [COMMON_DIRECTIVES], template: `<svg role="img" class="o-icon o-icon--large"> <use [xlink:href]="iconHref"></use> </svg>{{ innerText }}` }) export class Icon { iconHref: string = 'icons/icons.svg#menu-dashboard'; innerText: string = 'Dashboard'; } This triggers error: EXCEPTION: Template parse errors: Can't

问题 Sorry for basic question, I am trying to understand the angular2 flow using basic example. import { Component } from '@angular/core'; @Component({ selector:'my-app', template:'Test {{ getVal() }}' }) export class AppComponent{ getVal():void{ console.log("demo text") } } After running this example, "demo text" is visible in console 4times, why is it so ? Thanks. 回答1: Binding to functions or methods in the template is discouraged because these functions are called every time change detection is

问题 I am trying to render base64 string into <img src='data:image/png;base64,${Here}' . But always when I try to render it, ng2 sanitizing my base64 string before rendering it adds something into my value before showing it in DOM. I have found workaround(using DomSanitizer) but it doesn't work on latest versions. Here is my markup: <img alt="RegularImage" src="data:image/png;base64,{{imgBase64}}"> And here is my component part: imgBase64="SomeBase64StringFetchedSomehow"; But angular2 is showing

问题 Dealing with strange issue in Angular 2. If you look in the component below, the service returns a parsed object – for instance I can console.log it. You can see the output pasted as a comment. Whenever I try to use said object in the view, I get an error: EXCEPTION: TypeError: Cannot read property 'subject' of undefined in [{{theData.subject}} in SubjectHomeComponent@2:27] . This doesn't make sense to me as I can see the object in console just fine. Running typeof also returns that it's an

问题 I am trying to render base64 string into <img src='data:image/png;base64,${Here}' . But always when I try to render it, ng2 sanitizing my base64 string before rendering it adds something into my value before showing it in DOM. I have found workaround(using DomSanitizer) but it doesn't work on latest versions. Here is my markup: <img alt="RegularImage" src="data:image/png;base64,{{imgBase64}}"> And here is my component part: imgBase64="SomeBase64StringFetchedSomehow"; But angular2 is showing

问题 I would like to display {{ name }} string in Angular 2 template. How do I disable template binding for part of template? 回答1: Add the ngNonBindable attribute to the tag, then Angular doesn't process bindings. Plunker example 回答2: Update for Angular 4/5. Now, for printing { symbol inside angular template: {{ '{' }} ng serve out Error showing up the correct way My package.json: { "name": "angular-client", "version": "0.0.0", "description": "My Angular Client", "author": "noone", "copyright": ""

问题 How to Interpolate string with html using angular2. i know in angular 1.x there is $interpolate(templateString)(miniScope); but i haven't find the same for angular2. suppose i have a template like this : Hello my name is {{name}} and binding is like name: "<strong>Pardeep</strong>" so i want result like Hello my name is Pardeep Refer for angular1 for angular2 see here but i'm unable to understand clearly any help ? 回答1: You can simply use [innerHTML] directive to accomplish it. http://plnkr

问题 If a variable is declared private on a component class, should I be able to access it in the template of that component? @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 } 回答1: No, you shouldn't be using private variables in your templates. While I like the drewmoore's answer and see perfect conceptual

问题 I feel like I am missing something. When I try to use a data attribute in my template , like this: <ol class="viewer-nav"> <li *ngFor="#section of sections" data-value="{{ section.value }}"> {{ section.text }} </li> </ol> Angular 2 crashes with: EXCEPTION: Template parse errors: Can't bind to 'sectionvalue' since it isn't a known native property (" ]data-sectionvalue="{{ section.value }}">{{ section.text }} I'm obviously missing something with the syntax, please help. 回答1: Use attribute