angular2-template

问题 Auth in google, use Angular2. First, in HTML, I load google api library: //index.html //... <script> var googleApiClientReady = function() { ng2Gauth.googleApiClientReady(gapi); } </script> <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script> //... After in Angular2 service I handle google auth data and emit event to inform component if google api is ready: //google auth service .ts import {Injectable, EventEmitter} from 'angular2/core'; @Injectable()

问题 I would like to create navigation using a select element on my page. Using the RouterLink directive on an anchor tag is simple, but is there an equivalent for a select dropdown? Or am I required to create my own navigation method on my component to be called when there is a change on my select? <a [routerLink]="[location]">Location</a> <select (change)="navigate($event.target.value)"> <option>--Select Option--</option> <option [value]="[location]">Location</option> </select> I am looking for

问题 I am using ngFor loop to create a list with buttons to move objects around. I have attempted to use the ngFor variables first and last to disable certain buttons. I am finding "first" does not work <ul> <li *ngFor="#hero of heroes; #i=index, #first=first, #last=last"> <button class="btn btn-default btn-lg" [disabled]="first" (click)="moveToTop(hero, i)">Top</button> <button class="btn btn-default btn-lg" [disabled]="first" (click)="moveUp(hero, i)">Up</button> <button class="btn btn-default

问题 I have an enum, and want to pass from template the enum value. How is this possible? export enum FIELDS { GENDER = <any>'Gender', SALUTATION = <any>'Salutation', FIRSTNAME = <any>'First Name', LASTNAME = <any>'Last Name', EMAIL_ADDRESS = <any>'Email Address', COUNTRY = <any>'Country', } my template. Here i want to pass the enum value [ngClass]="{'error':validate(FIELDS.COUNTRY)}" //this throws an error: Unable to get property COUNTRY of undefined or null reference. my component: @Component({

问题 I am creating a component then it's set to root component then i am getting error Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. i have using RouterLink as a directive in component anotation but it can't work. app.routes.ts import { ModuleWithProviders } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { dogRoutes } from './Dogs/dog.routes'; import { catRoutes } from './Cats/cat.routes'; import {userRoutes} from ".

问题 I have a long list of user inputs, and would like to store these in an object instead of spelling them out in HTML. I want to bind these values to another object that stores the user/customer's data. Preferably using ngModel due to its simplicity and functionality. Anyone knows how I can achieve this? Example below (not working). @Component({ template: ` <div> <h2>NgModel Example</h2> <div *ngFor="let input of inputList"> {{ input.label }} <input type="text" [(ngModel)]="input.bindTo"> </div>

问题 I'm new to angular 2 , In multiple components i have written a two components in a single folder file i have import the 2nd class in first file and given directive: class but its showing error! Here the app.module.ts file import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule

问题 I have a template user like following: <div class="jumbotron"> <div class="container"> <h2><i class="fa fa-user"></i> {{username}}</h2> <p><i class="fa fa-star"></i> {{reputation}}</p> </div> </div> <app-list user={{username}}"></app-list> My component for app-list looks like: export class ListComponent implements OnInit { @Input() user: string; constructor() { } ngOnInit() { console.log(this.user); } } The username and reputation is correctly shown on the page. However the username value is

问题 I 'am facing this frustrating issue There is no directive with "exportAs" set to "ngForm" (" ]#f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal"> "): ng:///ComponentsModule/EquipeComponent.html@8:12 Error: Template parse errors: There is no directive with "exportAs" set to "ngForm" (" ]#f="ngForm" (ngSubmit)="onSubmit(f)" class="form-horizontal"> "): ng:///ComponentsModule/EquipeComponent.html@8:12 This is what my app.module.ts contains import { BrowserModule } from '@angular

问题 Using Angular 4.1, I'm trying to dynamically change a module type's template before the module rendered. Is this possible? We are bootstrapping an unknown number of components on the page (from a known list of component types), and the page may contain multiple components of the same type. I've found out a way to give each of these components a different selector so they can be rendered separately (even if they're of the same type), but I also need to give each one a different template. The