angular5

问题 I have a table of several anchor tags. I want to create an external URL dynamically on clicking each anchor tag. I tried using [routerLink] but it is getting the base URL appended. Is there any angular way of doing it ? Any help is much appreciated. html <ng-container matColumnDef="invoiceNo"> <mat-header-cell *matHeaderCellDef > Invoice # </mat-header-cell> <mat-cell *matCellDef="let invoice"> <a [routerLink]="getInvoiceUrl()" target="_blank"> {{invoice.invoiceNumber}} </a> </mat-cell> </ng

问题 I have a side-navbar in angular component which expands on click similar to this. The HTML snippet used to create the navbar is : HTML: As the name( openNav() ) suggests, the following HTML code will expand the navbar : <div> <img (click)="openNav()" src="/imagepath" id="image"> </div> And the following HTML code will close the navbar : <div id="mySidenav" class="sidenav"> <ul class="navbar-nav mr-auto" id="sidenavContent"> <li class="nav-item" id="close-btn"> <img class="closebtn" (click)=

问题 I have a component with a setTimeOut function inside a ngOnInit function. To write unit test cases for that I'm using tick and fakeAsync to fast forward the setTimeOut. But, it's not getting executed which in turn is not calling other function closeAlert(). Component code: export class BannerComponent implements OnInit { @Input()errorData: any; @Input()callback: any; @Input()autoHide: boolean; constructor() { } ngOnInit() { if (this.autoHide) { setTimeout (() => { this.closeAlert(); }, 500);

问题 I am trying to overwrite an existing component in angular. My original component is: @Component({ selector: 'app-orginal', templateUrl: './orginal.component.html', styleUrls: ['./orginal.component.css'] }) export class OrginalComponent implements OnInit { } in the app.component.html I use the original component like that: <app-orginal></app-orginal> What you would like to do is overwrite the original component with the mock component. This is my mock component: @Component({ selector: 'app

问题 I am learning Angular 5 with TypeScript. I am completely new to it. I am now trying to construct a form and validating it. But it is not working properly. Please see my code below. This is my component. @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.scss'], animations: [routerTransition()] }) export class LoginComponent implements OnInit { loginForm: FormGroup; errors = []; constructor(private fb: FormBuilder, public router: Router,

问题 I have created a new project and added some code to to the routing module for dynamic routing: Here is the routing module code: import { NgModule } from '@angular/core'; import { Routes, RouterModule, Router} from '@angular/router'; import { OneComponent } from './one/one.component'; import { HomeComponent } from './home/home.component'; const routes: Routes = [ { path: 'home', component: HomeComponent }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] })

问题 I followed this post to use the slider. I have a problem with the controller when I go to the next page. On the front page the controller works very well, when I go to the second page, the same values are repeated. So if on page 1 the product 1 in the first line is active, even on the second page, the product in the first line is active. But really the product is not active on the second page. The same thing is repeated on the other pages. Every page the first line has active. I think the

问题 I'm using Angular Material with Angular. My table does not display data on the ngOnInit lifecycle hook, but after I refresh the app it displays: Even ChangeDetectorRef doesn't affect the table. Here is the template for the table: <div class="example-container mat-elevation-z8"> <mat-table #table [dataSource]="dataSource"> <ng-container matColumnDef="Phone"> <mat-header-cell *matHeaderCellDef> Phone </mat-header-cell> <mat-cell *matCellDef="let user"> {{ user.phone }} </mat-cell> </ng

问题 I'm just following the demo to show a simple datatable. Here is my code: columns = [ {name: 'ID', prop: 'id'}, {name: 'Street Address', prop: 'address.street'}, {name: 'Suburb', prop: 'address.suburb'}, {name: 'State', prop: 'address.state'}, {name: 'Manager Name', prop: 'manager.name'}, {name: 'Manager Company', prop: 'manager.company'}, ]; <ngx-datatable #table class = 'material striped' [columns] = "columns" [rows] = "rows | async" [footerHeight] = "25" > </ngx-datatable> Sorting does work

问题 My current url is http://localhost:4200/test/dashboard. I want to print base url i.e http://localhost:4200 using angular 5 features. 回答1: No need for angular specific features, window.location.origin will do it for you. 回答2: PlatformLocation provides more details about the URL: import {PlatformLocation } from '@angular/common'; constructor(platformLocation: PlatformLocation) { console.log((platformLocation as any).location); console.log((platformLocation as any).location.href); console.log(