为什么 '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' 但是当没有路由器 link 时，字符串插值将 'index' 等于 1.

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

Answer 1

这执行：

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

之前：

(click)="getDataFromAPI()"

所以这就是为什么你在页面上得到正确的索引而在路由中得到错误的编号。

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

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

Why is 'index' equaling 0 in the routerLink, but 1 in the string interpolation?

api

routes

string-interpolation

angular