Как получить доступ к значениям массива из вспомогательной функции вне области видимости

Question

У меня есть массив объектов с парами ключ-значение, определенными в классе в методе ngOnInit. Я пытаюсь получить доступ к значениям этого массива из функции вне класса, не дублируя массив в функции, так как я не хочу определять массив и затем снова записывать его в функцию.

export class AppComponent implements OnInit {
staff: Array<any> = [""];


constructor(private _fb: FormBuilder) {}

  ngOnInit() {
    this.bmrForm = this._fb.group({
      staff: [""]
    });


this.staff = [
      {
        item_id: "MGS",
        item_text: "Michael Gary Scott"
      },
      {
        item_id: "DKS",
        item_text: "Dwight Kurt Schrute"
      }
    ];



}
  onSearchClicked() {
    expression(this.bmrForm);
  }
}
function expression(bmrForm: FormGroup) {
  for (let i = 0; i < this.staff.length; i++) {
    console.log(this.staff[i].item_id);
  }

}

Я попытался воссоздать проблему здесь:
https://stackblitz.com/edit/angular-rcjqq2?file=src%2Fapp%2Fapp.component.ts

Когда я пытаюсь вызвать функцию expression(); в onSearchClicked() метод получения свойства персонала не определен.

Я знаю, что если я продублирую staff в функции expression, я смогу получить его значение, однако я надеялся достичь этого, не дублируя мой код.

Любые решения для этого помогут.

Answer 1

bind expression в контексте класса при его вызове

onSearchClicked() {
  console.log(this.bmrForm.value);
  expression.bind(this, this.bmrForm);
}

Дополнительные пояснения:

expression.bind(this, this.bmrForm); означает - запустить функцию expression с использованием this ( который ссылается на контекст AppComponent) с одним аргументом this.bmrForm

Демонстрация: https://stackblitz.com/edit/angular-wvmhup?file=src / app / app.component.ts

Answer 2

Используйте ваш код Angular. Функция expression() должна быть внутри класса AppComponent и обращаться к функции express внутри onSearchClicked() таким образом this.expression(this.bmrForm). Я обновил ваш код, и теперь он работает.

import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular";
  staff: Array<any> = [""];
  bmrForm: FormGroup;
  dropdownSettings: any = {};
 ShowFilter = false;
    limitSelection = false;

  constructor(private _fb: FormBuilder) {}

  ngOnInit() {
    this.bmrForm = this._fb.group({
      staff: [""]
    });
    this.dropdownSettings = {
      singleSelection: false,
      idField: "item_id",
      textField: "item_text",
      selectAllText: "Select All",
      unSelectAllText: "Un-Select All",
      itemsShowLimit: 3,
                  allowSearchFilter: this.ShowFilter
    };

    this.staff = [
      {
        item_id: "MGS",
        item_text: "Michael Gary Scott"
      },
      {
        item_id: "DKS",
        item_text: "Dwight Kurt Schrute"
      }
    ];
    for (let i = 0; i < this.staff.length; i++) {
      console.log(this.staff[i].item_id);
    }
  }
  onSearchClicked() {
    console.log(this.bmrForm.value);
    this.expression(this.bmrForm);
  }
       toogleShowFilter() {
        this.ShowFilter = !this.ShowFilter;
        this.dropdownSettings = Object.assign({}, this.dropdownSettings, { allowSearchFilter: this.ShowFilter });
    }


    handleLimitSelection() {
        if (this.limitSelection) {
            this.dropdownSettings = Object.assign({}, this.dropdownSettings, { limitSelection: 2 });
        } else {
            this.dropdownSettings = Object.assign({}, this.dropdownSettings, { limitSelection: null });
        }
    }

  expression(bmrForm: FormGroup) {
    for (let i = 0; i < this.staff.length; i++) {
      console.log(this.staff[i].item_id);
    } 
  }
}

Answer 3

Другой вариант заключался бы в инкапсуляции вашей вспомогательной функции в объект. Вот ваш код с добавленной функциональностью:

import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular";
  staff: Array<any> = [""];
  myHelper : Helper;
  bmrForm: FormGroup;
  dropdownSettings: any = {};
 ShowFilter = false;
    limitSelection = false;

  constructor(private _fb: FormBuilder) {

  }

  ngOnInit() {
    this.bmrForm = this._fb.group({
      staff: [""]
    });
    this.dropdownSettings = {
      singleSelection: false,
      idField: "item_id",
      textField: "item_text",
      selectAllText: "Select All",
      unSelectAllText: "Un-Select All",
      itemsShowLimit: 3,
                  allowSearchFilter: this.ShowFilter
    };

    this.staff = [
      {
        item_id: "MGS",
        item_text: "Michael Gary Scott"
      },
      {
        item_id: "DKS",
        item_text: "Dwight Kurt Schrute"
      }
    ];
    this.myHelper = new Helper();
    for (let i = 0; i < this.staff.length; i++) {
      console.log(this.staff[i].item_id);
    }
  }
  onSearchClicked() {
    console.log(this.bmrForm.value);
    this.myHelper.expression(this.bmrForm,this.staff);
  }
       toogleShowFilter() {
        this.ShowFilter = !this.ShowFilter;
        this.dropdownSettings = Object.assign({}, this.dropdownSettings, { allowSearchFilter: this.ShowFilter });
    }


    handleLimitSelection() {
        if (this.limitSelection) {
            this.dropdownSettings = Object.assign({}, this.dropdownSettings, { limitSelection: 2 });
        } else {
            this.dropdownSettings = Object.assign({}, this.dropdownSettings, { limitSelection: null });
        }
    }
}

class Helper {

  expression(bmrForm: FormGroup, staff: Array<any>) {
  for (let i = 0; i < staff.length; i++) {
    console.log(staff[i].item_id);
  }

}


}

Таким образом, если количество вспомогательных функций растет, вы можете определить класс в другом месте и начать импортировать его там, где это необходимо. PD: bmrForm: FormGroup не требуется в expression()

Answer 4

Перемещение функции expression в пределах класса.

onSearchClicked() {
    this.expression(this.bmrForm);
  }

expression(bmrForm: FormGroup) {
  for (let i = 0; i < this.staff.length; i++) {
    console.log(this.staff[i].item_id);
  }
}