Javascript 为进度条获取相同的值

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

下面是我的代码，我在html部分使用了这个私有编号

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

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],
      })))
    );
  }
}

导出类UserlistComponent实现OnInit{
用户：可观察；
//私有编号：number=this.getRandomNumber（）；
构造器（专用服务：NgserviceService，专用路由：路由器）{
}
恩戈尼尼特（）{
此参数为.reloadData（）；
}
getRandomNumber（）{
返回Math.floor（Math.random（）*（100）+1）；
}
获取编号（）{
返回getRandomNumber（）；
}
重新加载数据（）{
this.users=this.\u service.getUserList（）管道(
map（arrayUsers=>arrayUsers.map（arrayUsers=>({
id:arrayUser[0]，
电邮：arrayUser[1]，
名字：arrayUser[2]，
姓氏：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>

添加用户


用户列表
名字
姓氏
电子邮件
行动
进展
{{user.firstname}
{{user.lastname}
{{user.email}
更新
删除
细节
{{number}}}%

---

上面的代码是我的html代码。我在这里使用了number，但我不能在html代码中使用getRandomNumber（）。请帮助我解决这个问题。

您使用*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

---

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

您好，欢迎来到Stack Overflow！请通过解释您希望实现的行为来改进您的描述。进度条应该显示什么？请编辑您的帖子，并向我们展示您的一些代码，以便我们了解您的意图。好的，谢谢您更新您的问题。现在解决你的问题很容易。请按照下面我更新的答案来解决您的问题。我使用了mat进度条上的getRandomNumber（）来在控制台上引发表达式更改TerrithasBeenCheckedError并给出错误的值。我更新了我的答案。如果它能帮助你，请随意接受它，如果它没有使用你的解决方案，请问另一个问题，我得到了ExpressionChangedTerithasBeenCheckedError，你可以在图片中看到。请帮助我解决问题@Chrissi GrilusYes，我认为这里有一个类似的问题：您为[value]和[appProgressBarColor]提供了“数字”。每次调用此getter方法时，它都将返回getRandomNumber（）。所以每次都是不同的颜色。可以看出，该条的颜色与该条的进度值不符。角度检查两次给同一组件的“数字”是否相同，而不是=>color！=价值我在这里救了你。您应该在Ngoninit中的map函数中将进度分配给您的用户对象。您还可以生成一个长度与您的用户相同的数组，并从与userArray中的用户相同的索引中获取随机数。如果您只想要随机数，而不在用户对象上创建属性，那么这将是一个技巧