获得相同的进度条角度值

Question

为进度条角度获取相同的值。我需要为每一行设置不同的值。

以下是我的代码，我在 html 部分使用了该私人号码。我无法将 getRandomNumber() 方法提供给

这会在控制台引发一些错误。

export class UserlistComponent implements OnInit {



users: Observable<User[]>;
 // private number: number = this.getRandomNumber();

  constructor(private _service: NgserviceService, private _route: Router) {
  }

  ngOnInit() {
    this.reloadData();
  }

  getRandomNumber(){
    return Math.floor(Math.random()*(100)+1);
  }

  get number() {
    return getRandomNumber();
  }

  reloadData() {
    this.users = this._service.getUserList().pipe(
      map(arrayUsers => arrayUsers.map(arrayUser => ({
        id: arrayUser[0],
        email: arrayUser[1],
        firstname: arrayUser[2],
        lastname: arrayUser[3],
      })))
    );
  }
}

HTML代码：

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" routerLinkActive="active">
        <button class="btn btn-primary" (click)="goToAddUser()">Add User</button>
      </a>
    </li>
  </ul>
</nav>
<div class="panel panel-primary">
  <div class="panel-heading">
    <h2>User List</h2>
  </div>
  <div class="panel-body">
    <table class="table table-striped">
      <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
        <th>Actions</th>
        <th>Progress</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let user of users | async">
        <td>{{user.firstname}}</td>
        <td>{{user.lastname}}</td>
        <td>{{user.email}}</td>
        <td>
          <button (click)="goToEditUser(user.id)" class="btn btn-info">Update</button>
          <button (click)="deleteUser(user.id)" class="btn btn-danger" style="margin-left: 10px">Delete</button>
          <button (click)="goToViewUser(user.id)" class="btn btn-info" style="margin-left: 10px">Details</button>
        </td>
        <td>
          <mat-progress-bar [value]="number" style="margin-right: 300px" [bufferValue]="number+1"
                            [appProgressBarColor]="number"></mat-progress-bar>
          {{ number }}%
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

上面的代码是我的html代码。我在这里使用了数字，我也不能在html代码中使用getRandomNumber()。请帮我解决这个问题。

Answer 1

您正在使用 *ngFor 正确地遍历您的用户 问题是您只调用 number=getRandomNumber() 一次，并且在其他任何地方都使用相同的数字。

你可能想这样做：

[value]=getRandomNumber()

or you use a getter in your ts-code:
get number {
  return getRandomNumber()
}
Then you can use [value]=number in your html-code

我认为这应该可以解决您的问题。