Не удается прочитать свойство 'service' из неопределенного

Question

Я не знаю, почему я не могу получить доступ к сервису или найти его, хотя я всегда получаю доступ к сервису таким образом, чтобы использовать другие имеющиеся у меня скрипты.

Сначала я внедряю свой сервис, который содержит функцию для добавления клиент к базе данных и пытается получить к ней доступ из глубоких двух циклов и одного оператора if. Даже закачанный пожарный магазин не может быть доступен. Я не знаю почему и понятия не имею. Ребята, вы можете мне помочь?

 constructor(
    public service: CustomerService,
    public firestore: AngularFirestore,
    ) { }



    scanImage() {
    console.log('>>>> Customer Scanning Image...');
    // let data: Customer;
    // this loops thru available pictures
    for (let image = 0; image < this.images.length; image++) {
      Tesseract.recognize (this.images[image]).then(
        function(result) {

        // store scanned text by new line
        const newLine = result.text.split('\n');

        // loop thru line
        for (let line = 0; line < newLine.length; line++) {

          // store scanned text by word
          const word = newLine[line].split(' ');


          // ask if we find the customer lines in the picture
          if (word[word.length - 1] === '>') {
            console.log(`>>>> time: ${word[0]}`);
            console.log(`>>>> code: ${word[1]}`);
            console.log(`>>>> name: ${word[2] + ' ' + word[word.length - 4]}`);
            console.log(`>>>> total: ${word[word.length - 3]}`);
            console.log(`>>>> status: ${word[word.length - 2]}`);
            console.log('______________________\n');

            const data: Customer = {
              time: word[0],
              code: word[1],
              name: word[2] + ' ' + word[word.length - 3],
              total: word[word.length - 2],
              status: word[word.length - 1]
            };

            this.service.add(data);
            // this.sendCustomer(data);

            // this.firestore.collection('customers').add(data);
            // this.customerList.push(data);

          }
        }
      });
    }
  }

Answer 1

Проблема в вашей function(result) {...} функции. Выполнив в нем свой код, вы создаете новую область, и this теперь ссылается на контекст function.

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

Пример, демонстрирующий это поведение:

class Test {
    withArrowFunction() {
        (() => console.log(this))();
    }

    withNormalFunction() {
        (function() {
            console.log(this);
        } )();
    }
}

const test = new Test();
test.withArrowFunction();
test.withNormalFunction();

Как видите, функция со стрелкой имеет доступ к реальному объекту, который был создан, в то время как для нормальной функции this равен undefined.

Answer 2

Попробуйте использовать выражения функции стрелки вместо function(result) {...}.

Функция стрелки не имеет своего this. Используется значение this лексической области видимости;

Tesseract.recognize (this.images[image]).then(
    (result) => {
        const data = {}
        this.service.add(data); // this reference to class scope and is valid.
    }
)