0

In meiner Angular2-App durchsuche ich eine Liste von Benutzern und für jeden Benutzer in der Liste bearbeite ich ein Symbol für die Ansicht, um diese Person darzustellen. Mit dieser Funktion möchte ich nun den Tooltipp von Material2 (mdTooltip) verwenden, um den Namen anzuzeigen, wenn jemand über das Symbol scrollt. Ich kann den Tooltip verwenden, wenn ich ihn über String-Interpolation mit einer singulären Eigenschaft in meiner Komponente verbinde, wie für "name: 'John Smith'" Ich kann einfach "{{name}}" in meiner HTML-Komponente verwenden. Aber wenn ich versuche, den Namen aus einem Array derselben Komponente zu ziehen, funktioniert es nicht. DieseVerwenden der String-Interpolation zum Ziehen von Werten aus einem Array in Angular2 App

ist, was meine Komponente wie folgt aussieht:

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() { 
    } 

} 

Und hier ist die Version meiner Komponente HTML, das funktioniert:

<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> 

Aber wenn ich String Interpolation versuchen, einen Wert aus einer ziehen Array und es im Tooltip verwenden, es funktioniert nicht:

<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> 

Antwort

1

in Ihrem Fall others ist ein Array, also hat es keine "name" -Eigenschaft. Indem Sie bereits darüber iterieren und jeden Wert in "Andere" setzen.
So wird diese Arbeit:

mdTooltip="{{other.name}}" 
+0

Ah, das stimmt. Perfekt, funktioniert jetzt. Vielen Dank! – Muirik

1

Ich glaube, Sie das Array verwenden und nicht die Instanz var

{{}} others.name

sollte

sein {{andere .name}}

Verwandte Themen