嵌套

嵌套对象

修改对象引用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 1class Pet {
 2  id: string = ''
 3  name: string = ''
 4  type: string = ''
 5
 6  constructor(id: string, name: string, type: string) {
 7    this.id = id
 8    this.name = name
 9    this.type = type
10  }
11}
12
13class Student {
14  id: string = ''
15  name: string = ''
16  pet: Pet
17
18  constructor(id: string, name: string, pet: Pet) {
19    this.id = id
20    this.name = name
21    this.pet = pet
22  }
23}
24
25@Entry
26@Component
27struct Page03_ObjectLink {
28  @State message: string = 'Hello World';
29  @State stu: Student = new Student('1', 'Han', new Pet('001', 'Dog', 'nabla'))
30
31  aboutToAppear(): void {
32    console.log(JSON.stringify(this.stu))
33  }
34
35  build() {
36    Column() {
37      Text(JSON.stringify(this.stu))
38
39      Button('修改学生').onClick(() => {
40        this.stu.name = 'Yang'
41      })
42
43      Button('修改宠物').onClick(() => {
44        // 修改属性不起作用
45        this.stu.pet.name = 'DogDog'
46
47        const dog = new Pet('002', 'DogDog', 'lion')
48        this.stu.pet = dog
49      })
50    }
51    .height('100%')
52    .width('100%')
53  }
54}

数组

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 1class Pet {
 2  id: string = ''
 3  name: string = ''
 4  type: string = ''
 5
 6  constructor(id: string, name: string, type: string) {
 7    this.id = id
 8    this.name = name
 9    this.type = type
10  }
11}
12
13class Student {
14  id: string = ''
15  name: string = ''
16  pet: Pet
17
18  constructor(id: string, name: string, pet: Pet) {
19    this.id = id
20    this.name = name
21    this.pet = pet
22  }
23}
24
25@Entry
26@Component
27struct Page03_ObjectLink {
28  @State message: string = 'Hello World';
29  @State stu: Student = new Student('1', 'Han', new Pet('001', 'Dog', 'nabla'))
30  @State school: Array<Student> =
31    [new Student('1', 'Han', new Pet('001', 'Dog', 'nabla')), new Student('2', 'Yang', new Pet('002', 'Bob', 'lion'))]
32
33  aboutToAppear(): void {
34    console.log(JSON.stringify(this.stu))
35  }
36
37  build() {
38    Column() {
39      Text(JSON.stringify(this.stu))
40
41      Button('修改学生').onClick(() => {
42        this.stu.name = 'Yang'
43      })
44
45      Button('修改宠物').onClick(() => {
46        // 修改属性不起作用
47        this.stu.pet.name = 'DogDog'
48
49        const dog = new Pet('002', 'DogDog', 'lion')
50        this.stu.pet = dog
51      })
52
53      Column() {
54        ForEach(this.school, (item: Student, index: number) => {
55          Text(JSON.stringify(item))
56
57          Button('修改学生').onClick(() => {
58            item.name = item.name + index
59          })
60          Button('修改宠物').onClick(() => {
61            item.pet.name = item.pet.name + index
62          })
63          Button('增加数组').onClick(() => {
64            this.school.push(new Student('1', 'Han', new Pet('001', 'Dog', 'nabla')))
65          })
66          Button('删除数组').onClick(() => {
67            this.school.splice(index, 1)
68          })
69        }, (item: Student) => item.id)
70      }
71    }
72    .height('100%')
73    .width('100%')
74  }
75}

@Observed

1
2
1@Observed放在类上
2@ObjectLink、@Observed一起使用，实现对象监听

@ObjectLink

1
2
1不能在@Entry页面使用，必须抽取子组件
2单独修改宠物属性，不会立即刷新在页面

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 1import { Student } from '../viewmodel/StudentModel'
 2import { Pet } from '../viewmodel/StudentModel'
 3import { Page02_ObjectLinkList } from './Page02_ObjectLinkList';
 4
 5@Entry
 6@Component
 7struct Page03_ObjectLink {
 8  @State message: string = 'Hello World';
 9  @State stu: Student = new Student('1', 'Han', new Pet('001', 'Dog', 'nabla'))
10  @State school: Array<Student> =
11    [new Student('1', 'Han', new Pet('001', 'Dog', 'nabla')), new Student('2', 'Yang', new Pet('002', 'Bob', 'lion'))]
12
13  aboutToAppear(): void {
14    console.log(JSON.stringify(this.stu))
15  }
16
17  build() {
18    Column() {
19      Text(JSON.stringify(this.stu))
20
21      Button('修改学生').onClick(() => {
22        this.stu.name = 'Yang'
23      })
24
25      Button('修改宠物').onClick(() => {
26        // 修改属性不起作用
27        this.stu.pet.name = 'DogDog'
28
29        const dog = new Pet('002', 'DogDog', 'lion')
30        this.stu.pet = dog
31      })
32
33      Column() {
34        ForEach(this.school, (item: Student, index: number) => {
35          Page02_ObjectLinkList({
36            item: item
37          })
38        }, (item: Student) => item.id)
39      }
40    }
41    .height('100%')
42    .width('100%')
43  }
44}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 1import { Student } from '../viewmodel/StudentModel'
 2import { Pet } from '../viewmodel/StudentModel'
 3
 4@Component
 5export struct Page02_ObjectLinkList {
 6  @ObjectLink item: Student
 7
 8  build() {
 9    Column() {
10      Text(JSON.stringify(this.item))
11
12      Button('修改学生').onClick((event: ClickEvent) => {
13        this.item.name = this.item.name + 'index'
14      })
15      Button('修改宠物').onClick((event: ClickEvent) => {
16        this.item.pet.name = this.item.pet.name + 'index'
17        this.item.name = this.item.name + 'index'
18      })
19    }
20  }
21}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 1export class Pet {
 2  id: string = ''
 3  name: string = ''
 4  type: string = ''
 5
 6  constructor(id: string, name: string, type: string) {
 7    this.id = id
 8    this.name = name
 9    this.type = type
10  }
11}
12
13@Observed
14export class Student {
15  id: string = ''
16  name: string = ''
17  pet: Pet
18
19  constructor(id: string, name: string, pet: Pet) {
20    this.id = id
21    this.name = name
22    this.pet = pet
23  }
24}

Copyright ©2010-2022 比特日记 All Rights Reserved.

Powered By 可尔物语

浙ICP备11005866号-12