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