id- input 입력값 생성
id 값 입력 한 것이 맞는지 아닌지를 확인 해야 되지 않나?
맞으면 true
- 로그인 창이 앵커 태그여서 계속 새창으로 떠서 div로 바꿈
- 입력값이 콘솔로 찍히는지 확인 ⇒ 확인이 안됨..
안되었던 이유가 loghome 타입을 선언을 안해줘서 그럼
@for ( log of loghome; track $index){ 아이디 }
### 🚨이슈!!
ts 파일에
login: logHome[] =[];
로그 홈에 오류생겨서
```tsx
interface logHome {
// }이거 넣었더니 오류 사라짐
interface ⇒ 관련된 프로퍼티들과 메서드들의 집합을 식별하기 위한 사양
쓰는법
🔽
앵귤러 기초(Angular basic) 13.인터페이스(interface)
🚨이슈!!
logHome: [] = [];
타입 설정을 해줌
🚨이슈!!
로그 홈 배열은 아이디와 비번을 가지고 있는 배열로써 나중에 이 배열로
로그인 아이디와 비번이 맞는지 아닌지를 확인 하고 아니면 로그인 안되게 하려고 함
logHome: [] = [];에서 logHome 변수를 빈 배열로 초기화하고 있는데, 이미 logHome 인터페이스가 정의되어 있기 때문에 필요하지 않습니다. 또한, logHome을 클래스 변수로 다시 정의하면서 이 변수가 의도한 목적과 다르게 사용되고 있습니다.
⇒ loghome 배열을 함수 밖으로 빼버림
login: logHome[] = [
{
id: "chan",
password: '0222'
},
{
id: "chan2",
password: '0333'
}
];
// login: logHome[] = [];
// logHome: [] = [];
//아이디와 비밀번호를 입력해서 버튼을 눌렀을때 index에 값이 맞는지 아닌지
//확인을 해야함
// 입력값이 배열에서 찾아야함
loginValue() {
if (this.login.find(login => login.id === 'chan')) {
// 로그인 화면으로 넘어가야 함
alert('로그인 화면으로 넘어감 ')
}
console.log(this.login);
}
저기서 말하는 대상에서 가 뭘까?
🚨이슈!!
주어진 코드에서 HomeComponent 클래스의 id 속성은 number 타입으로 선언되어 있습니다. 그러나 초기화된 값이 비어 있는 문자열('')로 설정되어 있습니다. 이는 타입 불일치 오류를 일으킬 수 있습니다.
id: number = 0;
logId: string = '';
password: string = '';🚨이슈!!
@Component와 class HomeComponent 가 떨어져 있어서 그런다고함
레전드
인터페이스를 위로 올리면 됨
🚨이슈!!
위의 오류는 타입스크립트에서 'logHome' 속성을 찾을 수 없다는 것을 나타냅니다. 오류 메시지에서 'logHome' 대신에 'loghome'을 찾으라고 제안하고 있습니다.
이러한 오류가 발생하는 이유는 TypeScript의 대소문자 구분 때문일 수 있습니다. 속성을 정의할 때 사용한 이름과 템플릿에서 해당 속성을 참조할 때 사용한 이름이 정확히 일치해야 합니다.
따라서 HomeComponent 클래스에서 'logHome' 속성을 참조하는 부분을 'loghome'으로 변경하거나, 템플릿에서 해당 속성을 참조하는 부분을 'logHome'으로 변경해야 합니다.
⇒ 타자 틀린것 하나가 오류가 되는.. 정신 차리라는 말인가
// 아이디 값이 chan 일때 로그인 화면으로 넘어감
⇒ 영상 추가
그러면 아이디와 비밀번호 둘다 맞아야지 홈 화면으로 들어가는 조건으로 만들어 볼까?
loginValue() {
if (this.login.find(login => login.logId === this.idInputValue),
this.login.find(login => login.password === this.pwInputValue)) {
// 로그인 화면으로 넘어가야 함
return alert('로그인 화면으로 넘어감 ');
}
else console.log('no');
// console.log('hi');
}
우선 만들긴 함 근데 여기서 오류..
😡😡😡😡😡😡
login: logHome[] = [
{
id: 1,
logId: 'chan',
password: '0222'
},
{
id: 2,
logId: 'chan2',
password: '0333'
}
];
로그인 아이디를 chan1 로 하고 비번을 0222로 하면 참으로 인식함..
왜 트루로 인식을 하는 걸꺼?
타입만 같으면 되서 그러는 걸까?
if (
this.login.find((login) => login.logId === this.idInputValue) &&
this.login.find((login) => login.password === this.pwInputValue)
) {
// 로그인 화면으로 넘어가야 함
return alert('로그인 화면으로 넘어감 ');
} else console.log('no');
// console.log('hi');if문은 조건이 하나만 맞아도 참이라고 반환을 해버림
그래서 하려면 and 연산자로 조건 모두가 참일때 출력 할수 있게 해야한다.
더 간단하게 쓸수있는 방법!! 감사합니다 진짜
loginValue() {
const hasId = this.login.find((item) => item.logId === this.idInputValue);
if (!hasId) {
alert('등록된 아이디가 없습니다');
return;
}
console.log(hasId);
if(hasId.password === this.pwInputValue){
}hasId 라는 작동 배열 login에서 찾는다 아이템을
조건- 객체 logid 와 아이디의 입력 값이 같을 때 참으로 하고
if 문
변수 hasId 가 !부정 연산자 ⇒ 아닐때
알람 ‘ 등록된 아이디가 없습니다’ 라고 리턴 값
console.log 확인하고
아이디가 맞으면 그 배열에서의 해당 객체를 가지고옴 그 객체에서 비교를 해서 확인 하기 때문에
만약 hasid의 password와 입력한 password 값과 같으면 트루
