Angular Ошибка элемента веб-компонента при привязке данных - PullRequest
Новая
       51

Angular Ошибка элемента веб-компонента при привязке данных

0 голосов
/ 20 марта 2020

Я играю с Angular Elements, чтобы посмотреть, смогу ли я создать веб-компоненты, используя существующие Angular компоненты, чтобы я мог разделить компонент между различными платформами. Я создал простой веб-компонент, используя Angular Элементы, которые должны принимать в качестве входных данных массив объектов и отображать что-то вроде списка. Я был в состоянии скомпилировать, однако, когда я подключил его к простой странице HTML, я получаю следующую ошибку:

Ошибка: «Ошибка при попытке diff» [объект Object], [объект Object], [object Object] '. Разрешены только массивы и итерации "

Моя страница выглядит следующим образом: 

  <head>    
    <title>Angular Element Component in HTML</title>
  </head>
  <body>
    <base href=".">
    <script src="elements/myCustomElements.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="elements/styles.css">


    <app-my-custom-element>

    </app-my-custom-element>

    <script type="text/javascript">
    let testData = [
    {
        name: 'Test Name 1',
        value: 'test1'
    },
    {
        name: 'Test Name 2',
        value: 'test 2'
    },
    {
        name: 'Test Name 3',
        value: 'test 3'
    }];

    const appMyCustomElement = document.getElementsByTagName('app-my-custom-element');

    if(appMyCustomElement.length>0){
      const target = appMyCustomElement[0];

      target.setAttribute('users', testData);
      target.addEventListener('search', (e) => testData.push({
        name: e,
        value: 'test'
      }));
    }
  </script>
  </body>
</html>

Есть ли какой-нибудь простой способ указать элементу Angular Elements что это массив?

РАЗЪЯСНЕНИЕ: Код, который я здесь вставил, не Angular, а чистый HTML. У меня есть отдельное приложение в Angular, которое «компилируется» как Angular Elements webcomponent . После процесса «компиляции» я получу 2 файла: myCustomElement. js & styles. css. На эти файлы теперь можно ссылаться в совершенно случайном приложении, написанном на React, Vue или даже на чистом HTML. Код, который вы видите, представляет собой чистую страницу HTML, которая пытается использовать мой веб-компонент

Решение, которое у меня есть сейчас и которое мне не нравится: В HTML страница заполняется при установке атрибута и передается как json: 

<html>
  <head>    
    <title>Angular Element Component in HTML</title>
  </head>
  <body>
    <base href=".">
    <script src="elements/myCustomElements.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="elements/styles.css">


    <app-my-custom-element>

    </app-my-custom-element>

    <script type="text/javascript">
    let testData = [
    {
        name: 'Test Name 1',
        value: 'test1'
    },
    {
        name: 'Test Name 2',
        value: 'test 2'
    },
    {
        name: 'Test Name 3',
        value: 'test 3'
    }];

    const appMyCustomElement = document.getElementsByTagName('app-my-custom-element');

    if(appMyCustomElement.length>0){
      const target = appMyCustomElement[0];

      target.setAttribute('users', JSON.stringify(testData));
      target.addEventListener('search', (e) => {
            let currentData = JSON.parse(target.getAttribute('users'));
            currentData.push({
                name: e.detail,
                value: 'test'
      });

      target.setAttribute('users', JSON.stringify(currentData));
    }
  </script>
  </body>
</html>

В приложении Angular мне нужно преобразовать json в объект типа: 


  convertedUsers: IUserInfo[] = [];

  @Input() set users(value: string) {
    console.warn(value);
    this.convertedUsers = JSON.parse(value) as IUserInfo[];
  }

  get users(): string {
    return JSON.stringify(this.convertedUsers);
  }

  @Output() search = new EventEmitter<string>();
...