在 Javascript 中解构对象 - ngbind - Angular 4+

Question

有人能告诉我如何在 Angular 4+ 的 ng-bind 中使用解构数据吗？

我从here 中了解到如何使用解构对象/数组。

const wes = {
  first: 'Wes',
  last: 'Bos',
  links: {
    social: {
      twitter: 'https://twitter.com/wesbos',
      facebook: 'https://facebook.com/wesbos.developer',
    },
    web: {
      blog: 'https://wesbos.com'
    }
  }
};

尝试如下绑定数据：

let {first : f, last:l}  =wes;

在 html 中我只是使用了{{f}}，

但它没有显示任何内容。我理解错了吗？

请参考我的做法：stackblitz

谢谢大家

Answer 1

你不能直接在angular中使用对象解构，因为它需要直接绑定到组件。

以您的样本为例，您可以执行以下操作：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular 4';
  count = 5;

  _destructuring = '';  
  ngOnInit() {
    const tmp = {a: 'hello'};
    const {a: _destructuring} = tmp;
    this._destructuring = _destructuring;
  }
}

更新示例： https://stackblitz.com/edit/angular-ngmodel-write-value-er4dcv?file=app/app.component.ts

或者，您可能希望在角度组件的this 上使用Object.assign。但是，这将涉及编写比需要的代码多得多的代码，所以...

编辑：根据要求，这里是带有原始对象的示例代码，以及（工作）示例：https://stackblitz.com/edit/angular-ngmodel-write-value-lf97lr?file=app/app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular 4';
  count = 5;

  _destructuring = '';
  _nested = {};

  ngOnInit() {
    const tmp = {a: 'hello'};
    const {a: _destructuring} = tmp
    this._destructuring = _destructuring;

    // Original (nested) object
    const wes = {
      first: 'Wes',
      last: 'Bos',
      links: {
        social: {
          twitter: 'https://twitter.com/wesbos',
          facebook: 'https://facebook.com/wesbos.developer',
        },
        web: {
          blog: 'https://wesbos.com'
        }
      }
    };
    // Object destructuring (links.social.facebook -> fb, links.social.twitter -> tw)
    const {
      links: {
        social: {
          facebook: fb,
          twitter: tw
        }
      }
    } = wes;

    // Assign to the local property, available in the component.
    Object.assign(this._nested, {
      fb: fb,
      tw: tw
    });
  }
}

Answer 2

看来效果不错：

const person = {
  first: 'John',
  last: 'Doe',
};

const { first, last } = person;
const { first: f, last: l } = person;

console.log(first, last);
console.log(f, l);