0
以下是一些代码段。这个模式（afaik）适用于英雄教程。* ngIf对布尔变化没有反应
login.component.html：
login.component.ts：
wrongCredentialsInserted: boolean = false;
//...
onSubmit(login: LoginDto): void {
console.log(`User '${login.username}' attempts to login...`);
if (this.authService.login(login.username, login.password)) {
this.location.back();
} else {
this.wrongCredentialsInserted = true; //This line gets executed!
}
}
没有得到该信息显示，即使我设置wrongCredentialsInserted为true。它被设置为true，我已经验证了这一点。我还尝试了*ngIf="wrongCredentialsInserted === true"之类的东西，因为我在其他地方读过，但没有奏效。 我读到这可能与“以Angular 2开头的单向数据流”有关，但我知道我们能够在我们公司的A2 +项目中做这样的事情。 AFAIK单向数据绑定仅指组件通信。
任何形式的帮助，高度赞赏。
编辑：由于我所做的事似乎有点混乱，我在这里发布整个文件。
login.component.ts
import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import {routerTransition} from '../../router.transition';
import {Component} from '@angular/core';
import {AuthService} from '../auth.service';
import {LoginDto} from './login-dto';
import {Location} from '@angular/common';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
animations: [routerTransition()]
})
export class LoginComponent {
private readonly USERNAME: string = 'username';
private readonly PASSWORD: string = 'password';
myForm: FormGroup;
username: AbstractControl;
password: AbstractControl;
message: string;
wrongCredentialsInserted = false;
constructor(public fb: FormBuilder,
public authService: AuthService,
public location: Location) {
this.message = '';
this.myForm = fb.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
this.username = this.myForm.controls[this.USERNAME];
this.password = this.myForm.controls[this.PASSWORD];
}
onSubmit(login: LoginDto): void {
console.log(`User '${login.username}' attempts to login...`);
if (this.authService.login(login.username, login.password)) {
this.location.back();
} else {
this.wrongCredentialsInserted = true;
}
}
login(username: string, password: string): boolean {
this.message = '';
if (!this.authService.login(username, password)) {
this.message = 'Incorrect credentials.';
setTimeout(
function() {
this.message = '';
}.bind(this), 2500);
}
return false;
}
logout(): boolean {
this.authService.logout();
return false;
}
}
login.component.html
<div class="ui raised segment">
<form [formGroup]="myForm"
(ngSubmit)="onSubmit(myForm.value)"
class="ui form"
[class.error]="!myForm.valid">
<div class="field"
[class.error]="!username.valid && username.touched">
<label for="username">Username:</label>
<input type="text"
id="username"
placeholder="Username"
[formControl]="username">
<div *ngIf="username.hasError('required') && username.touched"
class="ui error message">
Username is required
</div>
</div>
<div class="field"
[class.error]="!password.valid && username.touched">
<label for="password">Password:</label>
<input type="text"
id="password"
placeholder="Password"
[formControl]="password">
<div *ngIf="password.hasError('required') && password.touched"
class="ui error message">Password is required
</div>
</div>
<div class="ui grid">
<div class="two wide column middle aligned">
<button type="submit"
class="ui button"
[class.disabled]="!myForm.valid">Submit
</button>
</div>
<div class="fourteen wide column middle aligned" *ngIf="wrongCredentialsInserted">
<div
class="ui error message">Invalid credentials
</div>
</div>
</div>
</form>
</div>
login.component.css：空
auth.service.ts：
@Injectable()
export class AuthService {
constructor(private http: Http) {
}
login(user: string, password: string): boolean {
if (user === 'user' && password === 'password') {
localStorage.setItem('username', user);
return true;
}
return false;
}
logout(): any {
localStorage.removeItem('username');
}
getUser(): any {
return localStorage.getItem('username');
}
isLoggedIn(): boolean {
console.log(`Is user logged in? ' + ${this.getUser() !== null}`);
return this.getUser() !== null;
}
}
它适合我。你能提供更多的代码吗？ –
打开浏览器的调试控制台（通常是大多数浏览器的F12键）。您可能在其他地方（与此无关）发生模板错误，这可能导致模板代码停止工作。 – Igor
检查CSS不透明度：0;显示：无;可见性：隐藏... – Vega