在角页面中显示本地存储的值

TS页

1. 初始变量 username:string;

2. 从localstorage为fill变量创建函数

getName(){ this.username = localStorage.getItem("user_name"; }

3. 页面加载时调用变量

onInit(){ this.getName(); }

html页面

<input type="name" class="form-control" id="nameInput" value="{{username}}">

在这种情况下,我建议使用角度反应形式,而不是手动检索和绑定值。

在组件中,创建一个FormGroup实例,并将值从localStorage绑定到表单控件:

@Component({
  template: `
    <form *ngIf="form" [formGroup]="form" (submit)="editName($event)">
      <div class="form-group">
        <label for="nameInput">Name</label>
        <input formControlName="name" type="name" class="form-control" id="nameInput"> 
      </div>
      <button type="submit" class="btn btn-primary">Save changes</button>
    </form>
  `
})
export class YourComponent implements OnInit {
  form: FormGroup;

  ngOnInit(): void {
    this.form = new FormGroup({
      name: new FormControl(localStorage.getItem('user_name')),
    });
  }
}

有关角度反应形式的详细信息,请参见: https://angular.io/guide/reactive-forms

getUsername() {
  return localStorage.getItem('user_name');
}

然后我使用以下命令将其绑定到输入:

<input type="name" class="form-control" id="nameInput" value="{{getUsername()}}">