Angular 2在新函数中使用属性

Question

我试图在一个新函数中使用beacon Minor特性，但是编辑器告诉我找不到名称。我知道这是一个相当愚蠢的问题，但我就是不明白如何让它发挥作用。

这就是功能：

listenToBeaconEvents() {
this.events.subscribe('didRangeBeaconsInRegion', (data) => {
// update the UI with the beacon list  
this.zone.run(() => {
this.beacons = [];
let beaconList = data.beacons;
beaconList.forEach((beacon) => {
let beaconObject = new BeaconModel(beacon);
this.beacons.push(beaconObject);
console.log(beacon.minor);
});
});
});
}

在这里，当我执行console.log(beacon.minor)时，我会得到预期的结果，但如果我试图在该函数之外访问它，则该函数将不再工作。

像这样：

isThatBeacon() {
if (beacon.minor == 12345) {
console.log('beacon found');
}
}

谢谢。

更新

多亏了Nitzan的回答，我在编辑器中没有得到错误，然而，当我在设备上尝试时，我得到了以下错误：

inline template:22:4 caused by: Cannot read property 'minor' of undefined

HTML如下所示：

<button class="danger" (click)="isThatBeacon()">is working?</button>

谢谢。

Answer 1

变量beacon仅存在于传递给beaconList.forEach的函数的作用域中，在此作用域之外，变量不存在。

根据你想做的事情，你有几个选择：

(1) 将索引传递给isThatBeacon:

isThatBeacon(index: number) {
if (this.beacons[index].minor == 12345) {
console.log('beacon found');
}
}

但是，只有在异步操作完成后才能使用此方法。

(2) 将实际信标传递给isThatBeacon:

isThatBeacon(beacon: BeaconModel) {
if (beacon.minor == 12345) {
console.log('beacon found');
}
}

Answer 2

这里的方法略有不同，要根据您的值找到信标，您可以执行以下操作：

isThatBeacon() {
let beacon = this.beacons.find(x => x.minor === 12345)
if(beacon != undefined) {
console.log('beacon found!')
} else {
console.log('no beacon found!')
}
}

如果您真的想基于某个值来查找特定的信标，可以将该值传递给函数，并在数组中查找该值。

以下解决方案背后的想法是，您并非总是使用静态值12345，但该值可能会更改，并且您可以检查任何信标(如果存在)，这就是为什么我想介绍这种查找特定信标的解决方案。但如果你不需要这个功能，Nitzan的答案肯定更好！：)

isThatBeacon(value) {
let beacon = this.beacons.find(x => x.minor === value)
if(beacon != undefined) {
console.log('beacon found!')
} else {
console.log('no beacon found!')
}
}

至于您的错误，这可能是由异步问题引起的，即视图是在检索数据之前呈现的。因此，在列出信标的地方，可能会在某些迭代中添加*ngIf-语句，如下所示：

<div *ngIf="beacons">
<div *ngFor="let beacon of beacons">{{beacon.minor}}</div>
</div>

或者你可以使用安全的导航操作员：

<div *ngFor="let beacon of beacons">{{beacon?.minor}}</div>

更多关于安全导航操作员这里