angular - 为什么'index'在routerLink中等于0，但在字符串插值中等于1？

Question

<form class="mt-3 mb-5" (ngSubmit)="onSubmit()" #f="ngForm">
    <p class="mb-0 mt-1" id="invalidEmail" *ngIf="!emailValid">Invalid Email</p>
    <input class="mb-0 mt-1" type="email" id="email" name="email" ngModel required email><br>
    <button 
        (click)="getDataFromAPI()" 
        class="btn btn-primary mt-2" 
        type="submit"
        [disabled]="!f.valid"
        [routerLink]="['/profile', index]">Login</button>
</form>
<div class="card" style="width: 18rem;">
    <div class="card-header">
        Featured
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Email: {{ rEmail }}</li>
        <li class="list-group-item">Index: {{ index }}</li>
    </ul>
</div>

ts文件：

export class HomeComponent implements OnInit {
  @ViewChild('f') signupForm: NgForm;

  data:Array<any>;
  data2:Array<any>;
  index: number = 0;

  constructor(private JSONPlaceholder: JSONPlaceholderService) {
    this.data = new Array<any>();
    this.data2 = new Array<any>();
  }
  
  getDataFromAPI(){ 
      this.JSONPlaceholder.getData().subscribe((data) => {
      this.data = data;
      for (var i = 0; i < data.length; i++) {
        this.data2.push(data[i].email);
      }
      if(!this.data2.includes(this.rEmail)) {
        this.emailValid = false;
      } else {
        this.index = this.data2.indexOf(this.rEmail);
      }
    })
  }

}

当我单击按钮时，页面将转到“http://localhost:4200/profile/0”，但是当没有路由器链接时，字符串插值将“索引”等于 1。

'index' 值应该等于 1。因为那是变量被设置为。但是在 routerLink 中，'index' 保持为 0。为什么数字不会改变？显然，更改反映在表单下方的列表组中，但 routerLink 没有转到正确的位置。

标签： angularapiroutesstring-interpolation

Answer 1

这执行：

[routerLink]="['/profile', index]

前：

(click)="getDataFromAPI()"

所以这就是为什么你在页面上得到一个正确的索引而在路线上得到一个错误的数字。

[routerLink]只需this.router.navigate(['/profile', this.index]在索引更新为正确索引后删除即可。