Angular模板解析错误：无法绑定'i'元素'name'属性求助

Let's break down exactly why you're hitting this template parse error and how to fix it.

First, the error message is telling you that Angular doesn't recognize name as a valid property to bind on the <i> element. This usually happens in one of a few scenarios with your code:

1. Missing component properties for click event assignments #

Looking at your click handler:

(click)=" name = ingestion_info.ingestion.name; password=''; is_alive = false"

When you write name = ... in the template, Angular expects name, password, and is_alive to be properties declared in your component class. If you haven't defined these properties, Angular might misinterpret the assignment as an attempt to bind to the <i> element's name attribute (which doesn't exist as an Angular input property).

Fix: Add these properties to your component class:

// Inside your component .ts file
export class YourComponent {
  name: string = '';
  password: string = '';
  is_alive: boolean = false;
  // Your existing ingestion_info property here
}

2. Accidental direct binding to native name property without attr. prefix #

If you ever tried to bind the native name attribute directly using [name]="..." instead of [attr.name]="...", Angular would throw this error. Native HTML elements don't expose name as an Angular input property—you need to use the attr. prefix to bind to plain HTML attributes.

Looking at your current template, you're using data-name="{{ingestion_info.ingestion.name}}" which is correct for a custom data attribute. Just double-check you didn't accidentally write name="{{...}}" anywhere else in the template.

3. Syntax typos causing parser misinterpretation #

Sometimes unclosed brackets, missing quotes, or extra spaces can throw off Angular's template parser. For example, a typo like [name] instead of data-name would trigger this error. Your current template looks mostly clean, but it's worth scanning for any tiny syntax mistakes.

Corrected Template Example #

With the component properties added, your template should work as intended. Here's the cleaned-up version:

<i class="dropdown-icon btn-outline-warning icmn-spinner11"
   data-toggle="modal"
   data-target="#rerun_modal"
   data-name="{{ingestion_info.ingestion.name}}"
   [attr.data-target]="'#rerun_modal_' + ingestion_info.ingestion.name"
   (click)="name = ingestion_info.ingestion.name; password=''; is_alive = false">
  Rerun
</i>

That should resolve the template parse error!

内容的提问来源于stack exchange，提问作者SARANYA