angular2-template

问题 I just populated users from userservice and rendered in textbox control to table using *ngFor . User can change the value from table textbox. I want to validate on each row user textbox control. Here is my code.. Please provide a solution for my problem. Interface export interface IUser { userId: string; FirstName: string; status: number } Enum export enum UserStatus { Active = 0, InActive = 1, Resigned = 2 } Component export class UserComponent implements OnInit { users: IUser[];

问题 I have a LoginComponent class that has a Component decorator in Angular 2 (RC1). import {Component} from "@angular/core"; @Component({ selector: "login", templateUrl: "login-view.html" // Right here }) When the LoginComponent is loaded by the browser, it will fetch the template at the given template Url as defined above. What I am seeing is that the template GET is returning a 404. Upon closer inspection, I am seeing that the request url is: http://localhost:3000/%E2%80%9C/login-view.html I

问题 i'm trying to access the html elements inside the tabs component using the example from angular 2 docs: https://angular.io/resources/live-examples/homepage-tabs/ts/plnkr.html Here is my implementation so far: import {Component, ElementRef, Inject, OnInit,ViewChild, AfterViewInit} from 'angular2/core'; import {UiTabs, UiPane} from './tabs.component'; @Component({ selector: 'form-builder', templateUrl: './app/formbuilder/formbuilder.component.html', directives: [UiTabs, UiPane] }) export class

问题 I need to modify the templates for the angular 2 material date-picker. Its templates are declared in several internal components that are defined in @angular/material/esm5/datepicker.es5.js. I could modify the template directly in the node package, but then it would get overwritten when updating. The only two ways I can see this being possible is if I modify the template dynamically (is this really possible?), or if I copy over the entire angular material node package locally and then modify

问题 I am new to angular and currently using angular 5 i want to add check box and drop down list on click event() using Reactive form control. Please suggest a solution. 回答1: Your html template should look something like below: <div formArrayName="items" *ngFor="let item of items.controls; let i=index"> <div [formGroupName]="i" class="well"> <input type="checkbox" formControlName="isChecked" /> </div> <div *ngIf="isChecked.invalid && (isChecked.dirty || isChecked.touched)" class="alert alert

问题 How can I pass component reference to another component if both components are in ngFor? <div *ngFor="let address of fields?.addresses"> <div> <o-lookup-dropdownlist></o-lookup-dropdownlist> <o-lookup-dropdownlist [cascade]="!!!linkToUpper o-lookup-dropdownlist !!!!"></o-lookup-dropdownlist> </div> </div> Something like that: <div *ngFor="let address of fields?.addresses; let i = index"> <div> <o-lookup-dropdownlist #first{{i}}></o-lookup-dropdownlist> <o-lookup-dropdownlist [cascade]="'first

问题 I have used below code to access child component HTML element values in parent component during parent component's button click. Child Component.ts:- @Component({ selector: 'child-component', template: `<md-input-container><label>Title</label><input [(ngModel)]="Title" #Title></md-input-container><md-input-container><label>Name</label><input [(ngModel)]="name" #Name></md-input-container><md-input-container class="md-block" flex-gt-sm><label>State</label><md-select [(ngModel)]="user.state"

问题 Is is possible to transclude custom column definitions via ng-content or TemplateRef or similar? I've been testing via Kendo UI Grid plunker available at site (http://www.telerik.com/kendo-angular-ui/components/grid/) as well as Angular2 child component as data but to no avail. I've also tried it ng-content select but also nothing. Any help is greatly appreciated, thanks! @Component({ selector: 'test-component', template: ` <kendo-grid [data]="Data"> <kendo-grid-column></kendo-grid-column> //

问题 I have an array that I can loop through using ng-for syntax. However, ultimately I want to access just a single element of that array. I cannot figure out how to do that. In my component script I have export class TableComponent { elements: IElement[]; } In my template, I am able to loop through the elements via <ul> <li *ngFor='let element of elements'>{{element.name}}</li> </ul> However, trying to access an item in the element array by secifically referencing an item utilizing x {{elements

问题 What is the best practice to check if user has scrolled to the bottom of the page in Angular2 without jQuery? Do I have access to the window in my app component? If not should i check for scrolling to the bottom of the footer component, and how would I do that? A directive on the footer component? Has anyone accomplished this? 回答1: // You can use this. @HostListener("window:scroll", []) onScroll(): void { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { // you're at