javascript - Typescript，箭头函数和 rxjs 内的 "this"问题

Question

我尝试使用 => 推送到 rxjs 的 subscrive 方法内的数组，但外部数组的变量更改为内部对象，因此我无法使用 .push

@Component({
    selector: 'devices_status-panel',
    templateUrl: './devices.component.html',
    styleUrls: ['./devices.component.scss']
})

export class DevicesComponent implements OnInit {

    public rows = Array<any>();
    public columns = [
    { date: 'Fecha' },
    { deviceId: 'Equipo' },
    { error: 'Estado' },
    { statusType: 'Evento'},
    { location: 'Localidad'},
    { ip: 'Ip' },
    { version: 'Version' },
    { unencriptedMessage: 'Mensaje'}
    ];

    constructor(private devicesData: DevicesData) {


console.log("0")
console.log(this.rows)
this.getDeviceState();

    }


    getDeviceState(){ 

        this.devicesData.getStatePipe()
        .subscribe(([deviceState, info]) => {
            console.log("1")
            console.log(this.rows)

            Object.keys(deviceState).forEach((key1) => {
                const thisState: DeviceState = deviceState[key1];
                console.log("2")
                console.log(this.rows)


                Object.keys(thisState.status).forEach((key2) => {
                    console.log("3")
                    console.log(this.rows)


                    const status: Status = thisState.status[key2];



                    if (status){
                        const eventGroupArray: Array<Array<DeviceEvent>> = status.deviceStatus;
                        eventGroupArray.forEach((eventArray) => {
                            eventArray.forEach((event) => {

                                const state: StateArray = {
                                    date: event.date,
                                    deviceId: event.deviceId,
                                    error: status.error,
                                    ip: event.ip,
                                    statusType: event.statusType,
                                    unencriptedMessage: event.unencriptedMessage,
                                    version: event.version,
                                    location: null

                                };
                                if (info.info[thisState.id]){
                                    state.location = info.info[thisState.id];
                                }else{
                                    state.location = "Desconocida"
                                }
                                console.log(this.rows)
                                console.log(typeof this.rows)
                               this.rows.push(state);
                            });
                        });
                    }

                });

            });

        });
        console.log(this.rows)

    }
}

正如你所看到的，我在订阅内部添加了日志，就在函数调用之前，这是一个外部数组，内部是一个对象

我尝试自己解决它，但我找不到问题出在哪里，感谢任何帮助谢谢

Answer 1

您还没有向我们展示 log 语句所揭示的内容，但如果它们显示不同的内容，则发生的唯一原因是某些内容正在分配给 this.rows 在您订阅之前记录的时间和订阅发生的时间之间，如使用 setTimeout 的示例:

const foo = {
    example() {
        this.rows = [];
        console.log(1, this.rows);
        setTimeout(() => {
            console.log(2, this.rows);
        }, 100);
    }
};
foo.example();
foo.rows = {};

箭头函数内部的

this 与外部的相同，因为这就是箭头函数的工作原理。因此，如果 this.rows 发生变化，那是因为某些东西正在改变它。