Angular中ng-href无法解析插值变量问题求助

我想基于TypeScript里的模型生成不同用户的卡片，目前图片和用户名能正常获取，但ng-href标签里的插值变量没法正确解析。

HTML代码：

<div *ngFor='let person of people' class="card">
        <div class="imgBx">
        <img src="{{person.image}}"> <!-- 此处可正常获取图片 -->
        </div>  
        <div *ngFor='let social of person.socials' class="contentBx">
            <a ng-href="https://twitch.tv/{{person.username}}" target="_blank"><h2>{{person.username}}</h2></a> <!-- 此处用户名可正常显示 -->
        <div class="color">
          <span><a ng-href="https://twitch.tv/{{social.twitch}}" target="_blank"><svg img"></svg></a></span> <!-- 此处链接无法生效 -->
          <span><a ng-href="https://twitter.com/{{person.username}}" target="_blank"><svg img></svg></a></span> <!-- 换种方式仍无效 -->
          <span> {{social.twitter}} </span> <!-- 但纯文本可正常获取变量 -->
          <h1><a ng-href="https://twitch.tv/{{social.twitch}}">{{social.twitch}}</a></h1>
        </div>
        </div>
</div>

TypeScript文件中的person对象示例：

people: any[] =[
    {
      username: 'userName',
      image: 'link to image url',
      socials: [
        { twitch: 'userTwitch'},
        { twitter: 'userTwitter'},
        { instagram: 'userInstagram'}
      ]
    },
]

解决方案 #

1. 替换ng-href为Angular标准绑定语法 #

ng-href是AngularJS（旧版框架）的指令，Angular 2+里要使用属性绑定语法[href]，插值逻辑直接写在绑定的表达式中：

<!-- 错误写法 -->
<a ng-href="https://twitch.tv/{{person.username}}">

<!-- 正确写法 -->
<a [href]="'https://twitch.tv/' + person.username" target="_blank">

2. 修正socials数组的循环逻辑 #

你的socials数组中每个元素只存储一个社交平台账号，循环时会出现：

• 第一次循环拿到{ twitch: 'userTwitch' }，此时social.twitter不存在
• 第二次循环拿到{ twitter: 'userTwitter' }，此时social.twitch不存在
  导致部分链接变量为空，无法生成有效地址。

两种修正方式：

• 方式一：调整数据结构（推荐）
  把socials改成单个对象，包含所有社交平台字段：

people: any[] =[
    {
      username: 'userName',
      image: 'link to image url',
      socials: { 
        twitch: 'userTwitch',
        twitter: 'userTwitter',
        instagram: 'userInstagram'
      }
    },
]

对应HTML去掉内层*ngFor，直接访问person.socials的属性：

<div class="card" *ngFor='let person of people'>
    <div class="imgBx">
        <img [src]="person.image"> <!-- 建议统一用属性绑定替代插值 -->
    </div>  
    <div class="contentBx">
        <a [href]="'https://twitch.tv/' + person.username" target="_blank">
            <h2>{{person.username}}</h2>
        </a>
        <div class="color">
            <span>
                <a [href]="'https://twitch.tv/' + person.socials.twitch" target="_blank">
                    <svg></svg>
                </a>
            </span>
            <span>
                <a [href]="'https://twitter.com/' + person.socials.twitter" target="_blank">
                    <svg></svg>
                </a>
            </span>
            <span>{{person.socials.twitter}}</span>
            <h1>
                <a [href]="'https://twitch.tv/' + person.socials.twitch">{{person.socials.twitch}}</a>
            </h1>
        </div>
    </div>
</div>

• 方式二：保留原数组结构，添加判断逻辑
  如果必须保留原数组结构，需要在循环时判断当前social对象的属性：

<div class="card" *ngFor='let person of people'>
    <div class="imgBx">
        <img [src]="person.image">
    </div>  
    <div class="contentBx">
        <a [href]="'https://twitch.tv/' + person.username" target="_blank">
            <h2>{{person.username}}</h2>
        </a>
        <div class="color">
            <span *ngFor='let social of person.socials'>
                <a *ngIf="social.twitch" [href]="'https://twitch.tv/' + social.twitch" target="_blank">
                    <svg></svg>
                </a>
                <a *ngIf="social.twitter" [href]="'https://twitter.com/' + social.twitter" target="_blank">
                    <svg></svg>
                </a>
                <span *ngIf="social.twitter">{{social.twitter}}</span>
                <h1 *ngIf="social.twitch">
                    <a [href]="'https://twitch.tv/' + social.twitch">{{social.twitch}}</a>
                </h1>
            </span>
        </div>
    </div>
</div>

3. 额外优化：使用模板字符串简化写法 #

Angular支持在绑定中用ES6模板字符串，写法更简洁直观：

<a [href]="`https://twitch.tv/${person.socials.twitch}`" target="_blank">

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