Angular2 새로 고침 페이지

Ng2가 페이지를 새로 고치는 데 문제가 있습니다. 이 목적은 CRUD 시스템을 가지고 있기 때문에 새로운 항목을 입력하면 페이지가 성공적으로 새로 고치기를 원합니다. 그 이유는 테이블이 {{ studentAssign.assID[0]._id }} 과 같은 코드 항목을 통해 채워지기 때문입니다. 그러나 assID의 새 항목을 제출하면 studentAssign._id으로 배열에 조인 한 다음 빈 항목을 제공하고 '편집'및 '삭제'를 망칠 수 있습니다. 기능.Angular2 새로 고침 페이지

내가 페이지 새로 고침을 강제로 여러 가지를 시도

submitCreate(studentAssign) { 
     this.authHttp.post("/api/student-assignment/", JSON.stringify(studentAssign), this.options).subscribe(
      res => { 
       this.studentAssigns.push(studentAssign); // the response contains the new item 
       this.sendInfoMsg("item added successfully.", "success"); 
       // workaround to reset the form values 
       this.workaround = false; 
       setTimeout(() => this.workaround = true, 0); 
      }, 
      err => console.log(err) 
     ); 
    }

기능을 만들어 내. 나는. this.router.renavigate(); 및 this.router.navigate(['/Student-Assign']); 및 this.zone.run(() => {}); ... NgZone 용 영역 (구성 요소 다시 렌더링), 아무 것도 작동하지 않았습니다.

누락 된 것이 있습니까? 아니면 페이지 새로 고침을 피하기 위해 'assID'배열을 만드는 것이 쉬운가요?

편집 ngFor 코드 내가 몽구스에서 채우기하고 같이 배열로 제공

<tr *ngFor="let studentAssign of studentAssigns"> 
        <td style="text-align:center;"><div tooltip="{{studentAssign.assID[0].assignName}}" tooltipPlacement="top" tooltipTrigger="mouseenter">{{ studentAssign.assID[0]._id }}</div></td> 
        <td style="text-align:center;"><div tooltip="Email: {{studentAssign.studentID[0].email}} Name: {{studentAssign.studentID[0].firstName}} {{studentAssign.studentID[0].lastName}}" tooltipPlacement="top" tooltipTrigger="mouseenter">{{ studentAssign.studentID[0]._id }}</div></td> 
        <td style="text-align: center;"> 
         <button type="button" class="btn btn-warning btn-sm" (click)="toggleEdit(studentAssign)"><i class="fa fa-pencil"></i> Edit</button> 
         <button type="button" class="btn btn-danger btn-sm" (click)="submitRemove(studentAssign)"><i class="fa fa-trash"></i> Delete</button> 
        </td> 
       </tr>

, 원시 JSON :

{ "_id": 3, "__ V": 0 , "studentID": [{ "_ id": "1240681", "이메일": "[email protected]", "lastName": "Groves", "firstName": "Jakey", "__ v": 0}] , "assID": [{ "_ id": "As 1", "assignName": "Cwk", "__ v": 1, "modInsID": [13]}]}

출처

2016-08-28 Jake Groves

왜 작동하지 않을지 모르겠다. Angular2 변경 감지는 배열 또는 객체 내용을 변경하지 않고 객체 ID 만 확인합니다. '* ngFor' 자체는 배열 내용에 변화가 있는지 검사하고 바인딩이 있는지를 확인합니다. Angular CD는 변경 사항이있을 경우 이러한 바인딩을 검사합니다. 따라서 필요하거나 해결 방법이나 해킹이 없어야합니다. 브라우저 콘솔에 오류가 있습니까? –

다음 답장 내일. 잠자리 이용 시간 : O –

@ GünterZöchbauer, 답장을 보내 주셔서 감사 드리며 콘솔에 오류가 없습니다. 그리고이 코드는 {{{studentAssigns.length? studentAssigns.length : 0}}'그리고 배열의 양을 늘리면 새로운 엔티티를 추가 할 때 'studentAssign.assID [0] ._id'로 저장하지 않고'studentAssign '으로 저장합니다. _id'는 내가 원한 것이 아니며 'studentAssign.assID [0] ._id'로 저장되거나 배열을 채울 수 있도록 페이지를 새로 고쳐야합니다. 어쨌든 회신 주셔서 감사합니다 :) –

당신은

res => { 
    this.studentAssigns.push(studentAssign); 
    this.studentAssigns = this.studentAssigns.slice(); 
}

내가 더 많은 코드를 볼 필요가

을 시도 할 수 있습니다 더 나은 제안을 (당신이 배열을 바인딩 *ngFor을 사용합니까).

출처

2016-08-28 19:53:45

답장을 보내 주셔서 감사합니다. 메인 포스트에 추가 코드와 원시 JSON 형식이 추가되었습니다. 관계를 채울 때 배열을 가진 mongoDB에서 온 것입니다. –

Angular2 새로 고침 페이지

답변

관련 문제