Подсчет количества введенных данных Angular2

Ребят, помогите пожалуйста, недавно начал изучать typescript, как и angular. Вопрос в следующем, у меня есть виды данных d, f, b которые я ввожу в инпуты. Я написал этот комопонент `

import { Component } from '@angular/core';
@Component({
   selector: 'users',
   templateUrl: 'app/users.component.html',
   styleUrls: ['app/users.component.css']
 })
 export class UsersComponent {
  usersArr: any[] = [];
  designUsers: any[] = [];
  frontendUsers: any[] = [];
  backendUsers: any[] = [];
  addUsersRow() {
    this.usersArr.push({name : null, spec : null, price : null});
    console.log(this.usersArr);
  }
  recountUsers(i: number) {
      var print = this.usersArr[i].spec;
      if (print == 'd' || print == 'D') {
          this.designUsers.push(this.usersArr[i]);
      } else if (print == 'f' || print == 'F') {
          this.frontendUsers.push(this.usersArr[i]);
      } else if (print == 'b' || print == 'B') {
          this.backendUsers.push(this.usersArr[i]);
      }
  console.log('designU ' + this.designUsers.length);
  console.log('frontendU ' + this.frontendUsers.length);
  console.log('backendU ' + this.backendUsers.length);
 }
}`

А так же этот template:

<div class="addUser" id="addUser">
<h1>USER</h1>
<button class="addUser__button" id="addUserButton" type="button" (click)="addUsersRow()">Добавить USER</button>
<div class="addUser__input" *ngFor="let rowUsers of usersArr; let i=index">
    <input class="addUser__input-name" type="text" placeholder=" Имя: Петр">
    <input class="addUser__input-spec" type="text" placeholder=" Специализация: f/b/d" maxlength="1" pattern="[dbfDBF]" (change)="recountUsers(i)">
    <input class="addUser__input-price" type="number" placeholder=" Цена: 2000" min="0">
</div>

Подскажи пожалуйста в чем проблема если здесь например должно в консоль выдавать f = 1, d=1, b=2

А выводит без подсчета:

Спасибо.