Unerwartetes Verhalten des nth-child-Selektor

Die CSS - nth-child()-Selektor gibt die erwarteten Ergebnisse für html-und body-Knoten auf Chrome.

Gehen Sie zu einer website wie https://web.ics.purdue.edu/~gchopra/class/public/pages/webdesign/05_simple.html und tun:

document.querySelectorAll('body:nth-child(1)')

Der zurückgegebene Wert ist null, wenn es sein sollte, ein h1 an.

0
2019-09-19 09:18:13
Quelle
4 Antworten

Versuchen wie diesem:

TS:

this.allUsers.forEach(user => {
  let roleNames = ""
  user.roles.forEach((r, index) => {
    roleNames += r.name

    if (user.roles.length - 1 != index) {
      roleNames += ", "
    }

  })
  Object.assign(user, { "roleNames": roleNames })
})

Vorlage:

<table>
  <tr>
    <th>Id </th>
    <th>Name </th>
    <th>Roles </th>
  </tr>
   <tr *ngFor="let item of allUsers">
    <td>{{item.id}} </td>
    <td>{{item.firstName}} </td>
    <td>{{item.roleNames}} </td>
  </tr>
</table>

Arbeiten Demo

+0
2019-09-19 09:21:28

versuchen wie diesem:

this.allUsers.forEch(user => {
  user.roleNames.push(user.roles);
})
+0
2019-09-19 09:21:28

Wie ich verstanden habe; Sie brauchen, um Benutzer-Rollen neben seinen details, ist das wahr?

Ich glaube, Sie sind mit matTable oder mindestens *ngFor; so müssen Sie eine Funktion, um die passenden Rollen; z.B.:

getRoles(user: Object) {
    return user.roles.reduce((str, role) => {
        // add role name if this is the first role; else add role to string then return it    
        return str? str += ', ' + role.name: role.name;
    }, '');
}

Es ist nicht notwendig, um zu reduzieren-Funktion; Sie können temporäre variable mit einem normalen loop, aber das ist die sauberere Möglichkeit.

Dann aus HTML aufrufen Sie können es in Rollen td; wie:

<tr *ngFor="let user of allUsers">
    <!-- previous details-->
    <td> {{getRoles(user)}} </td>
</tr>

Lesen Sie mehr über die senken - Funktion.

+0
2019-09-19 09:21:28

Können das ändern, dass die string-array mit den ersten

export interface AllUsers{
    allUsers: User[]; // shouldn't be a string array?!
}

Fügen Sie den Benutzer

export interface User {
  id: number;
  firstName: string;
  lastName: string; 
  email: string;
  password: string;
  roles: Role[];
}

Und Rolle

export interface Role {
  id: number;
  name: string
}

Versuchen Sie zu vermeiden, mit zu abonnieren, benutzen async-Rohr statt. Sie verwenden könnte, lodash, um Ihre arrays.

export class AllUserComponent implements OnInit {
  allUsers$: Observable<User[]>;
  distinctRoles$: Observable<Role[]>;

  constructor(private userService: UserService) {}

  ngOnInit() {
    // Take from UserService getAll method
    this.allUsers$ = this.userService.getAll().pipe(
      map((all: AllUsers) => all.allUsers),
    );

    // map the roles
    this.distinctRoles$ = this.allUsers$.pipe(
      map((allUsers: User[]) => _.flatMap(allUsers, 'roles')), // import * as _ from 'lodash'
      map((allRoles: Role[][]) => _.flatten(allRoles)),
      map((allRoles: Role[]) => _.uniq(allRoles)), // remove the line if you don't want disctinct
    );
  }

Und "abonnieren" auf Ihrer Observablen, die in Ihrer Vorlage mit der asynchronen pipe

<div *ngFor="let role of disctictRoles$ | async">
+0
2019-09-19 09:21:28

Sehen Sie sich andere Fragen zu Tags an