Question

在我的Angular2应用程序中，我循环浏览用户列表，对于列表中的每个用户，我在视图中填充一个图标来表示该人。有了这个工作，我现在想使用material2的工具提示（mdTooltip）来显示有人滚动图标时的名字。当我通过字符串插值将它连接到我的组件中的单个属性时，我可以得到工具提示工作，例如＆＃34;名称：＆＃39; John Smith＆＃39;＆＃34;我可以使用＆＃34; {{name}}＆＃34;在我的组件HTML中。但是当我尝试从同一个组件中取出一个数组中的名称时，它就不起作用了。

这就是我的组件的样子：

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>

Answer 1

在您的情况下，others是一个数组，因此它没有“name”属性。你已经迭代了它，把每个值都放到“其他”中所以这将有效：

mdTooltip="{{other.name}}"

Answer 2

我认为您使用的是数组，而不是实例var

应该是

使用字符串插值从Angular2 App中的数组中提取值

2 个答案: