角度模板 ngif 在重新加载页面之前不起作用

Posted 2023-02-22

【中文标题】角度模板 ngif 在重新加载页面之前不起作用

【英文标题】：angular template ngif not work before reload page

【发布时间】：2022-01-23 19:04:00

【问题描述】：

我遇到了一个奇怪的问题。 我正在使用 angular 12，渲染后，页面不显示 ngIF 模板。只有在我重新加载页面后才会加载输入

...imports

@Component 
...
export class VideoUploadComponent implements OnInit  
 ... 
variables
...
  isFile: boolean= true;
 
  constructor(
   ...
  ) 
    
    this.isFile = true;
  

  ngOnInit() 

  

...
Component functions
...

  
  onRadioboxChange(event: any) 
    this.isFile = !this.isFile;
    console.log(this.isFile);
  

  

这里是html

  <form
    ...
  >
   ...
          
          <input
           ...
            (change)="onRadioboxChange($event)"
          />
          <label class="btn btn-outline-primary" for="url">Endereço</label>
        </div>

        <div class="mb-3 mx-auto">
          <div *ngIf="isFile; else endereco">
            ...
              />
            </div>
          </div>
        </div>

        <ng-template #endereco>
           ...
          </div>
        </ng-template>
      </div>
      <div class="form-item">
      ...
  </form>
</div>

重新加载之前

重新加载页面后

有人可以帮我解决这个问题吗？强调文字

【参考方案1】：

问题解决了。

*ngIf 没有显示内容，因为我没有使用 routerLink 导航到页面

之前

<li>
 <a class="dropdown-item nav-item" href="#/upload"**>
  Cadastrar</a>
 </li>

解决方案：

<li>
<a class="dropdown-item nav-item" [routerLink]="['/upload']">
Cadastrar</a>
 </li>