Question

我需要知道是否有办法以编程方式创建HTML本地变量。

我正在开发一个Web应用程序，我有一个NgFor循环，我希望能够为NgFor创建的每个子元素分配一个局部变量。

即：

<?php
// Add Variation Settings
add_action( 'woocommerce_product_after_variable_attributes','variation_settings_fields', 10, 3 );
// Save Variation Settings
add_action( 'woocommerce_save_product_variation', 'save_variation_settings_fields', 10, 2 );
/**
 * Create new fields for variations
 *
*/
function variation_settings_fields( $loop, $variation_data, $variation ) {
    // Text Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_text_field[' . $variation->ID . ']', 
            'label'       => __( 'My Text Field', 'woocommerce' ), 
            'placeholder' => 'http://',
            'desc_tip'    => 'true',
            'description' => __( 'Enter the custom value here.', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_text_field', true )
        )
    );
    // Number Field
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_number_field[' . $variation->ID . ']', 
            'label'       => __( 'My Number Field', 'woocommerce' ), 
            'desc_tip'    => 'true',
            'description' => __( 'Enter the custom number here.', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_number_field', true ),
            'custom_attributes' => array(
                            'step'  => 'any',
                            'min'   => '0'
                        ) 
        )
    );
    // Textarea
    woocommerce_wp_textarea_input( 
        array( 
            'id'          => '_textarea[' . $variation->ID . ']', 
            'label'       => __( 'My Textarea', 'woocommerce' ), 
            'placeholder' => '', 
            'description' => __( 'Enter the custom value here.', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_textarea', true ),
        )
    );
    // Select
    woocommerce_wp_select( 
    array( 
        'id'          => '_select[' . $variation->ID . ']', 
        'label'       => __( 'My Select Field', 'woocommerce' ), 
        'description' => __( 'Choose a value.', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, '_select', true ),
        'options' => array(
            'one'   => __( 'Option 1', 'woocommerce' ),
            'two'   => __( 'Option 2', 'woocommerce' ),
            'three' => __( 'Option 3', 'woocommerce' )
            )
        )
    );
    // Checkbox
    woocommerce_wp_checkbox( 
    array( 
        'id'            => '_checkbox[' . $variation->ID . ']', 
        'label'         => __('My Checkbox Field', 'woocommerce' ), 
        'description'   => __( 'Check me!', 'woocommerce' ),
        'value'         => get_post_meta( $variation->ID, '_checkbox', true ), 
        )
    );
    // Hidden field
    woocommerce_wp_hidden_input(
    array( 
        'id'    => '_hidden_field[' . $variation->ID . ']', 
        'value' => 'hidden_value'
        )
    );
}
/**
 * Save new fields for variations
 *
*/
function save_variation_settings_fields( $post_id ) {
    // Text Field
    $text_field = $_POST['_text_field'][ $post_id ];
    if( ! empty( $text_field ) ) {
        update_post_meta( $post_id, '_text_field', esc_attr( $text_field ) );
    }

    // Number Field
    $number_field = $_POST['_number_field'][ $post_id ];
    if( ! empty( $number_field ) ) {
        update_post_meta( $post_id, '_number_field', esc_attr( $number_field ) );
    }
    // Textarea
    $textarea = $_POST['_textarea'][ $post_id ];
    if( ! empty( $textarea ) ) {
        update_post_meta( $post_id, '_textarea', esc_attr( $textarea ) );
    }

    // Select
    $select = $_POST['_select'][ $post_id ];
    if( ! empty( $select ) ) {
        update_post_meta( $post_id, '_select', esc_attr( $select ) );
    }

    // Checkbox
    $checkbox = isset( $_POST['_checkbox'][ $post_id ] ) ? 'yes' : 'no';
    update_post_meta( $post_id, '_checkbox', $checkbox );

    // Hidden field
    $hidden = $_POST['_hidden_field'][ $post_id ];
    if( ! empty( $hidden ) ) {
        update_post_meta( $post_id, '_hidden_field', esc_attr( $hidden ) );
    }
}
?>

上面的例子向您展示了我想要完成的事情，但显然无效。有没有办法实现这个目标？

提前谢谢。

修改

在看到我得到的答案后（我感谢所有花时间阅读我的问题但试图回答的人）我会解释一下为什么我会这样想。

我将使用<div *ngFor="#elt of eltList" > <span #setLocalVariable(elt.title)></span> </div> setLocalVariable(_title : string){ let var = do some stuff to _title; return var; }中的loadIntoLocation()。该函数作为第3个参数获得了一个引用锚点的字符串（即：html元素中的DynamicComponentLoader）。这就是为什么我需要创建名称等于我的#test。

的名称的局部变量

Answer 1

我认为局部变量（使用#字符定义）不适用于您的用例。

实际上，当您在HTML元素上定义局部变量时，它对应于组件（如果有）。当元素上没有组件时，变量引用元素本身。

指定局部变量的值允许您选择与当前元素关联的特定指令。例如：

<input #name="ngForm" ngControl="name" [(ngModel)]="company.name"/>

将设置与ngForm变量中当前关联的name指令的实例。

因此局部变量不会以您想要的为目标，即设置为循环的当前元素创建的值。

如果您尝试做类似的事情：

<div *ngFor="#elt of eltList" >
  <span #localVariable="elt.title"></span>
  {{localVariable}}
</div>

您将遇到以下错误：

Error: Template parse errors:
There is no directive with "exportAs" set to "elt.title" ("
  <div *ngFor="#elt of eltList" >
    <span [ERROR ->]#localVariable="elt.title"></span>
    {{localVariable}}
  </div>
"): AppComponent@2:10

Angular2实际上在这里查找与提供的名称elt.title匹配的指令... ...请参阅此plunkr以重现错误：https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview

有关更多详细信息，请参阅此链接：http://victorsavkin.com/post/119943127151/angular-2-template-syntax，“本地变量”部分。

除了迭代的当前元素之外，ngForm仅提供一组导出值，这些值可以别名为局部变量：index，last，even和odd。

请参阅此链接：https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

您可以做的是创建一个子组件来显示循环中的元素。它将接受当前元素作为参数，并创建“局部变量”作为组件的属性。然后，您就可以在组件的模板中使用此属性，以便在循环中为每个元素创建一次。这是一个示例：

@Component({
  selector: 'elt',
  template: `
    <div>{{attr}}</div>
  `
})
export class ElementComponent {
  @Input() element;

  constructor() {
    // Your old "localVariable"
    this.attr = createAttribute(element.title);
  }

  createAttribute(_title:string) {
    // Do some processing
    return somethingFromTitle;
  }
}

以及使用它的方式：

<div *ngFor="#elt of eltList" >
  <elt [element]="elt"></elt>
</div>

修改

在您发表评论后，我认为您尝试了此答案中描述的方法。以下是更多详细信息：create dynamic anchorName/Components with ComponentResolver and ngFor in Angular2。

希望它可以帮到你，亨利

Answer 2

您可以将其粘贴到模板插值中，因为它处理表达式。

<div *ngFor="#elt of eltList" >
    <span>{{setLocalVariable(#elt)}}</span>
</div>

setLocalVariable(_title : string){
    let var = do some stuff to _title;
    return var;
}

使用Angular2以编程方式创建Html局部变量

2 个答案: