在insertAdjacentHTML中加载ngFor

Question

我通过用户点击动态地在模板中附加元素，这样：

#!/bin/bash

create_backup () {
    # Check if 2 arguments are given to function.
    if [ -z ${3+x} ]; then
        # Check if folder from which we will make backup exists.
        if [ -d ${1} ]; then
            echo "Creating backup in ${2} of folder ${1}..."
            mkdir -p ${2}
            mv ${1}/* ${2}/
            echo "Backup stored in ${2}."
        else
            echo "There is no folder in ${1}!"
            exit 1
        fi
    else
        echo "You must specify folder and backup folder name!"
        exit 1
    fi
}

if [ -z ${2+x} ]; then
    # Only main folder specified
    main_folder=${1}
    date_stamp=`date +%Y-%m-%d_%H:%M`
    backup_folder=${main_folder}_"${date_stamp}
elif [ -z ${3+x} ]; then
    main_folder=${1}
    backup_folder=${2}
else
    echo "Specify folder path or folder name and backup folder path!"
    exit 1
fi

create_backup ${main_folder} ${backup_folder}

但是{{lup.name}}不打印实际值，而是打印它的方式。如何使其工作？任何人

更新：

我试过这种方式，但仍然说是

this.optionValue = [];

youClickMe(){
  var moreput = '';
      moreput += '<select">';
        moreput += '<option *ngFor="let lup of optionValue">{{lup.name}}</option>';
      moreput += '</select>';
  var pElement = document.querySelector('.somewhereyoubelong');
      pElement.insertAdjacentHTML('beforeend', moreput);
}

const templating = '<p *ngFor="let sizeCat of sizeCategoryBySubCategory" [value]="sizeCat.id">{{sizeCat.name}}</p>'; const tmpCmp = Component({template: templating})(class {}); const tmpModule = NgModule({declarations: [tmpCmp]})(class {}); this._compiler.compileModuleAndAllComponentsAsync(tmpModule).then((factories) => { const f = factories.componentFactories[0]; const cmpRef = f.create(this._injector, [], null, this._m); //cmpRef.instance.testText = 'B component'; cmpRef.instance.sizeCategoryBySubCategory = [ { id:1, name: 'a'}, { id:2, name: 'b'}, ]; this._container.insert(cmpRef.hostView); });

Answer 1

Angular不处理Angular特定标记，例如匹配组件或指令选择器或动态添加HTML的绑定。

Angular在编译组件时为这些东西生成代码。 在编译组件时，组件模板中没有的内容被Angular完全忽略。

您可以做的是在运行时动态创建和编译Angular组件。有关详细信息，请参阅How can I use/create dynamic template to compile dynamic Component with Angular 2.0?