angular - Angular 5 [ngClass] 更改语言设置

Question

以下静态 html<ul>下拉列表（样式包括在下面）完美运行。现在我正在尝试<li>使用*ngFor*and将其转换为 Angular 5 动态ngClass。

<!-- LANG SELECT - TEST -->
<ul class="nav-item header-dropdown-list hidden-xs">
	<li class="open">
		<a href="#" class="nav-link dropdown-toggle my-1" data-toggle="dropdown" aria-expanded="true"> 
			<img src="./assets/images/blank.gif" class="flag flag-en" alt="United States"> <span> US</span> 
			<!-- <img src="./assets/images/blank.gif" [ngClass]="getSelFlagClass(lang)" alt="United States" #selectedLanguage> <span> US</span>  -->
			
		</a>
		<ul class="dropdown-menu pull-right">
			<!-- <li *ngFor="let lang of translate.getLangs()" 
				[class.active]="clicked === lang"
				[value]="lang" 
				(click)="lang === translate.currentLang" >

				<a href="#"><img src="./assets/images/blank.gif" [ngClass]="getFlagClass(lang)" alt="United States"> {{lang}}</a>
			</li> -->
			<li class="">
				<a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-en" alt="United States"> English (US)</a>
			</li>
			<li>
				<a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-fr" alt="France"> Français</a>
			</li>
			<li>
				<a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-sp" alt="Spanish"> Español</a>
			</li>
			<li>
				<a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-de" alt="German"> Deutsch</a>
			</li>
			<li>
				<a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-jp" alt="Japan"> 日本語&lt;/a>
			</li>
			<li>
				<a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-cn" alt="China"> 中文</a>
			</li>	
			<li>
				<a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-it" alt="Italy"> Italiano</a>
			</li>	
			<li>
				<a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-pt" alt="Portugal"> Portugal</a>
			</li>
			<li>
				<a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-ru" alt="Russia"> Русский язык</a>
			</li>
			<li>
				<a href="javascript:void(0);"><img src="./assets/images/blank.gif" class="flag flag-kr" alt="Korea"> 한국어&lt;/a>
			</li>
		</ul>
	</li>
</ul>

<style>
	
	.flag {
		width: 16px;
		height: 11px;
		background: url(./assets/images/flags.png) no-repeat;
		margin-top: -.18em;
		display: inline-block
	}
	
	.flag.flag-en {		
		background-position: -144px -154px
	}
	.flag.flag-sp {	
		background-position: -16px -44px
	}
    /* additional flag styles omitted */

	.flag {
		text-transform: capitalize;
		display: inline-block;
		max-width: 150px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: middle;
		margin-top: -3px
	}
	
	@media (min-width: 768px) and (max-width:979px) {
		.flag+span {
			max-width:30px!important
		}
	}
	

	.header-dropdown-list {
		list-style: none;
		float: right;
		position: relative;
		margin: 0;
		padding-left: 0;
		padding-right: 0
	}
	</style>

Angular 版本看起来像这样，但我无法<a href>在加载时显示顶部标志（也无法在我重新选择语言时）。

如果您查看下面的屏幕截图，您会看到我的初始标志没有显示在<ul>它所说的位置的顶部US。我想我应该处理这个问题，@ViewChild()但我不确定 - 或者也许是@HostBinding().

<ul class="nav-item header-dropdown-list hidden-xs">
	<li class="open">
		<a href="#" class="nav-link dropdown-toggle my-1" data-toggle="dropdown" aria-expanded="true"> 
			
			<img src="./assets/images/blank.gif" [ngClass]="getSelFlagClass(lang)" alt="United States" #selectedLanguage> <span> US</span> 
			
		</a>
		<ul class="dropdown-menu pull-right">
			<li *ngFor="let lang of translate.getLangs()" 
				[class.active]="clicked === lang"
				[value]="lang" 
				(click)="lang === translate.currentLang" >

				<a href="#"><img src="./assets/images/blank.gif" [ngClass]="getFlagClass(lang)" alt="United States"> {{lang}}</a>
			</li>
		</ul>
	</li>
</ul>

  getFlagClass(sel){
    return "flag flag-" + sel;
  }
  getSelFlagClass(sel){
    // i.e.  class="flag flag-us"
    return "flag flag-" + sel;
  }