在 Angular2 应用程序中使用字符串插值从数组中提取值
Using String Interpolation to Pull Value from an Array in Angular2 App
在我的 Angular2 应用程序中,我循环访问用户列表,对于列表中的每个用户,我都在视图中填充一个图标来代表该人。通过这项工作,我现在想使用 material2 的工具提示 (mdTooltip) 在有人滚动图标时显示名称。当我通过字符串插值将它连接到组件中的单个 属性 时,我可以使工具提示正常工作,例如 "name: 'John Smith'" 我可以在组件 [=22= 中使用“{{name}}” ].但是当我尝试从同一个组件的数组中提取名称时,它不起作用。
这是我的组件的样子:
import { User } from './../../views/user/user';
import { Component, OnInit, Input } from '@angular/core';
import { AuthenticationService } from './../../data/authentication.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-room',
templateUrl: './room.component.html',
styleUrls: ['./room.component.less']
})
export class RoomComponent implements OnInit {
otherImg = 'app/img/photo-ph.png';
model: any;
loading = false;
name = 'John Smith';
others = [
{ id: 1, name: 'John Smith', avatar: 'app/img/photo-ph.png' },
{ id: 2, name: 'Javier Sanchez', avatar: 'app/img/photo-ph.png' }
];
user;
token;
nickname;
constructor(private authenticationService: AuthenticationService,
private router: Router) { }
isLoggedIn() {
this.loading = true;
if (this.authenticationService.isAuthenticated()) {
return true;
}
}
ngOnInit() {
}
}
这是我的组件 HTML 有效的版本:
<div *ngIf="isLoggedIn()" class="others">
<span *ngFor="let other of others"><i [ngClass]="'material-icons'" [routerLink]="['/chat']" mdTooltip="{{name}}" tooltip-position="below">person</i></span>
<a [routerLink]="['/login']">Logout</a>
</div>
但是当我尝试使用字符串插值从数组中提取值并在工具提示中使用它时,它不起作用:
<div *ngIf="isLoggedIn()" class="others">
<span *ngFor="let other of others"><i [ngClass]="'material-icons'" [routerLink]="['/chat']" mdTooltip="{{others.name}}" tooltip-position="below">person</i></span>
<a [routerLink]="['/login']">Logout</a>
</div>
在你的例子中 others
是一个数组,所以它没有 "name" 属性。你已经迭代了它,并将每个值放入 "other".
所以这会起作用:
mdTooltip="{{other.name}}"
我认为您使用的是数组而不是实例 var
{{others.name}}
应该是
{{other.name}}
在我的 Angular2 应用程序中,我循环访问用户列表,对于列表中的每个用户,我都在视图中填充一个图标来代表该人。通过这项工作,我现在想使用 material2 的工具提示 (mdTooltip) 在有人滚动图标时显示名称。当我通过字符串插值将它连接到组件中的单个 属性 时,我可以使工具提示正常工作,例如 "name: 'John Smith'" 我可以在组件 [=22= 中使用“{{name}}” ].但是当我尝试从同一个组件的数组中提取名称时,它不起作用。
这是我的组件的样子:
import { User } from './../../views/user/user';
import { Component, OnInit, Input } from '@angular/core';
import { AuthenticationService } from './../../data/authentication.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-room',
templateUrl: './room.component.html',
styleUrls: ['./room.component.less']
})
export class RoomComponent implements OnInit {
otherImg = 'app/img/photo-ph.png';
model: any;
loading = false;
name = 'John Smith';
others = [
{ id: 1, name: 'John Smith', avatar: 'app/img/photo-ph.png' },
{ id: 2, name: 'Javier Sanchez', avatar: 'app/img/photo-ph.png' }
];
user;
token;
nickname;
constructor(private authenticationService: AuthenticationService,
private router: Router) { }
isLoggedIn() {
this.loading = true;
if (this.authenticationService.isAuthenticated()) {
return true;
}
}
ngOnInit() {
}
}
这是我的组件 HTML 有效的版本:
<div *ngIf="isLoggedIn()" class="others">
<span *ngFor="let other of others"><i [ngClass]="'material-icons'" [routerLink]="['/chat']" mdTooltip="{{name}}" tooltip-position="below">person</i></span>
<a [routerLink]="['/login']">Logout</a>
</div>
但是当我尝试使用字符串插值从数组中提取值并在工具提示中使用它时,它不起作用:
<div *ngIf="isLoggedIn()" class="others">
<span *ngFor="let other of others"><i [ngClass]="'material-icons'" [routerLink]="['/chat']" mdTooltip="{{others.name}}" tooltip-position="below">person</i></span>
<a [routerLink]="['/login']">Logout</a>
</div>
在你的例子中 others
是一个数组,所以它没有 "name" 属性。你已经迭代了它,并将每个值放入 "other".
所以这会起作用:
mdTooltip="{{other.name}}"
我认为您使用的是数组而不是实例 var
{{others.name}}
应该是
{{other.name}}