Создать локальную переменную Html программно с помощью Angular2

Мне нужно знать, есть ли способ программно создавать локальные переменные HTML.

Я разрабатываю веб-приложение, где у меня есть цикл NgFor, и я хочу иметь возможность назначать локальную переменную для каждого элемента, созданного NgFor.

т.е.:

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

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

Пример выше показывает, что я пытаюсь выполнить и, очевидно, не работает. Есть ли способ достичь этого?

Спасибо заранее.

Edit:

После просмотра ответов, которые я получил (и я благодарю всех, кто нашел время, чтобы прочитать мой вопрос и попытался ответить на него), я объясню немного больше, почему я так хочу.

Я буду использовать: loadIntoLocation() из DynamicComponentLoader. Эта функция получила в качестве третьего параметра строку, которая ссылается на якоря (т.е.: #test в элементе html). Вот почему мне нужно создать эти локальные переменные с именем, равным имени моего elt.title.

Ответы

Ответ 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>
"): [email protected]: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>

Edit

После вашего комментария, я думаю, что вы попробуете подход, описанный в этом ответе. Вот более подробная информация: создать динамическое имя-anchorName/Components с ComponentResolver и ngFor в Angular2.

Надеюсь, это поможет вам, Thierry

Ответ 2

Вы можете вставить его в интерполяцию шаблона, поскольку он обрабатывает выражения.

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

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