При keydown почему console.log значения отличается от присвоения значения объекту? - PullRequest
Новая
       17

При keydown почему console.log значения отличается от присвоения значения объекту?

4 голосов
/ 24 апреля 2020

Когда я набираю текстовое поле и консоль регистрирует событие keydown в Chrome, я вижу, что оно имеет много свойств (особенно я пытаюсь получить доступ к KeyboardEvent.code).

Вывод на консоль 

{
altKey: false
bubbles: true
cancelBubble: false
cancelable: true
charCode: 0
code: "Tab"
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: true
detail: 0
eventPhase: 0
isComposing: false
isTrusted: true
key: "Tab"
keyCode: 9
location: 0
metaKey: false
path: (25) [input#My-monthly-budget.form-control.p-0.border-left-0.spec--money-input.ng-untouched.ng-invalid.is…, div.input-group.is-invalid, div.fc-col-input, div.fc-row, finance-control-money.col-sm-12.my-2.my-md-3.my-lg-0.col-lg-3, div.row.mb-1.pb-2.ng-star-inserted, finance-filters-section.mt-5.mt-lg-3.pt-1, div.finance-filters-container, section#finance-filters.ng-star-inserted, finance-section.ng-star-inserted, section.pl-3.py-3, div.ng-tns-c15-4.ng-trigger.ng-trigger-toggleAccordion, div.py-3, personalise-journey-step-accordion#personalise-funding.ng-tns-c15-4, div.container.mt-5, ng-component.ng-star-inserted, ng-component.ng-star-inserted, div.position-relative.pt-5.ng-trigger.ng-trigger-routerTransition, div.ng-tns-c3-1, ng-component.ng-tns-c3-1.ng-star-inserted, app-root, body#login-page.login-page.system-page.live.auth-page, html, document, Window]
repeat: false
returnValue: false
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: input#My-monthly-budget.form-control.p-0.border-left-0.spec--money-input.ng-untouched.ng-invalid.is-invalid.ng-dirty
target: input#My-monthly-budget.form-control.p-0.border-left-0.spec--money-input.ng-untouched.ng-invalid.is-invalid.ng-dirty
timeStamp: 11386.555000091903
type: "keydown"
view: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
which: 9
}

Но когда я присваиваю это значение объекту, единственное свойство, к которому я могу получить доступ, это "isTrusted"

Значение объекта 

{ "isTrusted": true }

Пример этого можно увидеть в CodePen ниже

https://codepen.io/aidanbiggs/pen/KKdWmBQ

HTML

<my-app></my-app>

TypeScript 

// import does not work in Codepen
// using const instead
const {Component, HostListener} = ng.core;
const {bootstrap} = ng.platform.browser;

@Component({
    selector: 'my-app',
    template: '<div style="padding:1rem; display:flex; flex-direction: column"><input placeholder="Type here to see"> <div style="margin-top:1rem;">Event has property "code": {{value}}</div><div style="margin:1rem 0">Event:</div><span style="border:1px solid black; padding:1rem">{{event | json}}</span><div style="margin-top:1rem">View console to see difference between object and console.log</div>'
})
class AppComponent {
  public value:boolean ;
  public event: KeyboardEvent;
@HostListener('keydown', ['$event'])
    public onKeyDown(event: KeyboardEvent): boolean {
      this.value = event.hasOwnProperty('code');
      this.event = event;
      console.log(event)
    }}

bootstrap(AppComponent);

Почему существует разница между console.log () события и присвоение события?

1 Ответ

3 голосов
/ 24 апреля 2020

Почему существует разница между console.log () события и назначением события?

Нет никакой разницы, вы видите другой вывод, потому что json pipe ({{event | json}}) выполняет JSON.stringify для преобразования значения в его JSON -форматное представление. Источник

Вы можете найти больше информации о том, как JSON.stringify работает здесь

Так что если вы обновите журнал до console.log(JSON.stringify(event)) - вы получите точно такой же вывод.

...